Trimming html and css table layout

Question

Trimming html and css table layout

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

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

However,whenIlowerthewindow,thetablesandtheheaderare"disorganized," like this:

HowdoI"lock" the tables and that they do not change position according to the size of the window?

The CSS used in the table follows:

<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 mysql html css

asked by anonymous 11.10.2017 / 19:12

2 answers

2

Try to give the table with Width 100% inside a DIV. The desired size places in the Width of the DIV, and you can even put the tab in the Mobile, also placing overflow-x in the DIV and also a min-width in the table inside a @media.

27.10.2017 / 20:03

Change class after 3s via javascript Android does not find the local variable, but does not exist

score 2 · Accepted Answer

If you want it to always look like this and stick with the scroll bar put it in 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 it this way:

.conteudo{
    width: 1363px;
}