Existe-t-il une déclaration CSS équivalente à & # 8220; width: auto & # 8221; pour < table > éléments?

Question

J'essaie de créer un < table > qui ne dépasse pas une certaine largeur (disons 500 px), même avec des bordures de toutes tailles.

Normalement, si je le fais:

(HTML)

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

(CSS)

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

Je vais me retrouver avec un < table > c'est-à-dire 510 pixels de large, car la moitié des bordures gauche et droite se termineront à l'extérieur de la < div > ;. Ce que je veux, c'est un < table > total (c'est-à-dire qui ne dépasse pas la largeur de son parent / conteneur). Ainsi, les bordures gauche et droite auront chacune une largeur de 10 pixels, à l’intérieur des 500 pixels de largeur contenant < div > - par conséquent, le contenu restant de la table serait de 480px.

Je peux facilement faire ce genre de chose avec un < div > en utilisant la déclaration CSS " width: auto. " Je peux simuler avec une table en ajoutant un supplément < div > autour de celui-ci qui utilise " width: auto " avec la bordure définie sur ce < div > ;, et non sur la .

Cependant, j'espère qu'une solution plus élégante existe (doit être multi-navigateur). Est-ce qu'il y en a un dont je ne suis pas au courant?

Answer 1

Définissez la largeur de la division sur 480 pixels et placez-y la bordure de 10 pixels. Définissez ensuite la table sur 100% largeur

Answer 2

Je ne sais pas si cela fonctionnerait, mais ... pourriez-vous placer le premier (bordure gauche) et le dernier (bordure droite) TD (ou TR peut-être) à la place du tableau lui-même? Cela devrait donner le même résultat visuel.

Sinon, je ne perdrais pas beaucoup de sommeil avec une DIV d'emballage.

Answer 3

Je ne sais pas s'il existe une solution multi-navigateurs. Le modèle de boîte IE fonctionne comme vous le souhaitez: une fois que vous déclarez la largeur d’un élément, c’est la largeur, puis il se soustrait à la valeur "intérieure". largeur de l'élément la marge de remplissage et la bordure pour vous donner la largeur déclarée.

Tous les autres navigateurs font l'inverse: ils définissent la largeur de l'élément sur la largeur déclarée, puis ajoutent le remplissage et la bordure de la marge.

Je viens de tester votre code dans IE7 et Firefox 3.5. Ils semblent tous deux avoir une largeur de 500 pixels, même avec la bordure noire de 10 pixels. Ce sont les anciennes versions de Firefox qui me préoccupent.