Arranging html and css table layout

Asked

Viewed 613 times

0

I have a page in php that searches for mysql data and shows in a table:

inserir a descrição da imagem aqui

However, when I shorten the window, the tables and the header are "disorganized", thus:

inserir a descrição da imagem aqui

How do I "lock" the tables and they do not change position according to window size?

Follow the CSS used in the table:

<style>
table.sss1 {   
    font-family: arial;
    padding: 4px; 
    text-align: center;
    float:left;   
    border: 1px solid;
    border-spacing: inherit;
}

table.sss2 {    
    font-family: arial;
    padding: 4px; 
    text-align: center;
    float:right;    
    border: 1px solid;
    border-spacing: inherit;
}

td {
    padding: 4px; 
    font-family: arial;
    font-size:100%;     
    /*width: 21.93%;*/
    height: 2px;
    border: 1px solid;
    border-color: black;   
} 

tr {
    background: white;    
}         
</style>

Follow the header code:

#menu ul {
padding:5px;
margin:0px;  
background: url(logo-cma.png) center no-repeat ;
background-color: #EDEDED;        
list-style: none;
width:99.85%;
height: 80px ;
}
  #menu ul li { display: inline; }

#menu ul li a {
font-family: arial;
padding: 2px 10px;
display: inline-block;   
background-color: #EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
transition: background-color 1s , color 1s , border-bottom 1s; 
transition-timing-function: ease-out;
 }
  #menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:5px solid #991919;
 }  

<link rel="stylesheet" type="text/css" href="cabecalho.css">

<style>

 yp {   
 font-family: verdana;
 font-weight: bold;
 color: darkslategrey;
  text-align: right;
  }  

  </style>

  <nav id="menu">
   <ul>
    <yp><?php echo '<p>'.$logado.'</p>'; ?></yp>
     <li><a href="http://10.24.0.42/felipe_projetos/">Inicio</a></li>
    <li><a href="index.php">Quotes - RT</a></li>
    <li><a href="QuotesMem.php">QuotesMem - RT</a></li>
    <li><a href="historico.php">Histórico</a></li>
    <li><a href="check_hour.php">Horario de verão</a></li>
    <!--<li><a href="#">Em breve</a></li>
    <li><a href="#">Em breve</a></li>-->
    </ul>
   </nav>
php html mysql css

  • You want me to stay centered all the time? Because being always on each other’s side becomes complicated, because when you shorten the window, it also decreases the space for them to stay!

  • No, I want you both to stand side by side, regardless of the screen size.

  • And when there is no space for them to stay there?? Do you want to scroll bar?

  • Exactly! That’s what I want.

  • Has how to post HTML and CSS code to view??

  • Put this in the CSS of your tables: overflow-x:auto; Come back here and tell me if it works.

  • @Bsalvo, is it to put this inside table.exe { overflow-x:auto } ? Or inside td.outroexe {overflow-x:auto} ?

  • I don’t know your code, put it like this in your css: table { overflow-x:auto; }

  • They are centering

  • I added the CSS used in the table there in the question

  • Made menu with tag table?

  • @Jonathandetoni, I entered the header code

  • Standing side-by-side is always impossible, because there will come a time when the table will not be able to get smaller and then will be one below the other. That’s because the width of the column only goes as far as there’s text inside it.

  • @Dvdsamm, what if the site compacts? would work?

  • What do you mean? I don’t understand

Show 10 more comments

2 answers

1


If you want to always look like this and keep the scroll bar put like this on your body:

body{
    width: 1363px;
}

But if you want this to happen only on a specific page, create a class with the name content for example and do so:

.conteudo{
    width: 1363px;
}

1

Try to place the table with Width 100% inside a DIV. The desired size put in DIV Width, and you can even put the tebela in Mobile, also putting overflow-x in DIV and also a min-width in the table within a @media.

Browser other questions tagged php html mysql css

You are not signed in. Login or sign up in order to post.