0

Estou com uma página página em php que busca pelo mysql dados e mostra em uma tabela:

inserir a descrição da imagem aqui

Entretanto, quando diminuo a janela, as tabelas e o cabeçalho se "desorganizam", dessa forma:

inserir a descrição da imagem aqui

Como faço para "travar" as tabelas e que eles não mudem de posição de acordo com o tamanho da janela?

Segue o CSS usado na tabela:

<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>

Segue o código do cabeçalho:

#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>
15
  • Você quer que fique sempre centralizado?? Pois ficarem sempre uma do lado da outra fica complicado, pois quando se diminui a janela, diminui também o espaço para elas ficarem! Commented 11/10/2017 às 17:13
  • Não, quero que ambas fiquem lado a lado, independente do tamanho da tela. Commented 11/10/2017 às 17:14
  • E quando não houver espaço para elas ficarem ali?? Quer que de barra de rolagem? Commented 11/10/2017 às 17:15
  • Exatamente! Isso que eu quero. Commented 11/10/2017 às 17:17
  • Tem como postar o código HTML e CSS para ver?? Commented 11/10/2017 às 17:18

2 Respostas 2

1

Se você quer que sempre fique assim e fique com a barra de rolagem coloque desta forma no seu body:

body{
    width: 1363px;
}

Mas se deseja que aconteça isso somente em uma pagina especifica, crie uma class com o nome conteudo por exemplo e faça desta forma:

.conteudo{
    width: 1363px;
}
1
  • Obrigado, era exatamente isso que eu queria! Commented 11/10/2017 às 18:20
1

Tente dar colocar a tabela com Width 100% dentro de uma DIV. O tamanho desejado coloque no Width da DIV, e você pode até colocar a tebela no Mobile, colocando também overflow-x na DIV e também um min-width na tabela dentro de um @media.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .