Existe uma declaração CSS equivalente a “width: auto” para elementos?

StackOverflow https://stackoverflow.com/questions/1625999

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando criar um

que não exceda uma determinada largura (digamos 500px), mesmo com as fronteiras de qualquer tamanho.

Normalmente, se eu faço:

(HTML) 

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

(CSS) 

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

Eu vou acabar com um

que é 510px de largura, uma vez que metade das fronteiras esquerda e direita vai acabar no lado de fora do
. O que eu quero é um
que é 500px de largura Total (ou seja, que não exceda a largura de seu pai / container). Assim, as fronteiras esquerda e direita seria cada 10px de largura, situada no interior da 500px de largura contendo
-., Portanto, permanecendo área de conteúdo da tabela seria 480px

Eu posso facilmente fazer este tipo de coisa a um

usando a declaração CSS "width: auto". I pode fingir com uma tabela, adicionando um extra
em torno dele que os usos "width: auto". Com o conjunto de fronteira em que
, não o

No entanto, eu estou esperando que existe uma solução mais elegante (deve ser cross-browser). Existe um que eu não estou ciente de?

Foi útil?

Solução

Defina a div para 480px de largura e colocar a fronteira 10px nele. Em seguida, defina a tabela para 100% de largura

Outras dicas

Não tenho certeza se ele iria trabalhar, mas ... você poderia fazem fronteira com o primeiro (margem esquerda) e último TDs (margem direita) (ou TR talvez) em vez da tabela em si? Isso deve dar o mesmo resultado visual.

Caso contrário, eu não iria perder muito sono durante um DIV wrapper.

Eu não sei se há uma solução cross-browser. O modelo de caixa IE realmente funciona da maneira que você quer: uma vez que você declarar a largura de um elemento, que é a largura, e então subtrai a largura "interior" do elemento da margem estofamento e fronteira para dar-lhe a largura declarou.

Todos os outros navegadores fazem o oposto: eles definir a largura elemento para a largura declarado e, em seguida, adicione o preenchimento de margem e de fronteira

.

Eu só testou seu código no IE7 e Firefox 3.5 e ambos parecem ser 500px de largura mesmo com a borda preta 10px. É as versões mais antigas do Firefox eu me preocuparia sobre.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top