¿Hay una declaración CSS equivalente a & # 8220; ancho: auto & # 8221; para < table > ¿elementos?

Question

Estoy tratando de crear una < tabla > que no exceda un cierto ancho (digamos 500 px), incluso con bordes de cualquier tamaño.

Normalmente, si lo hago:

(HTML)

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

(CSS)

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

Voy a terminar con una < table > eso es 510px de ancho, ya que la mitad de los bordes izquierdo y derecho terminarán en el exterior del < div > ;. Lo que quiero es una < table > es decir total de 500 px de ancho (es decir, que no excede el ancho de su padre / contenedor). Por lo tanto, los bordes izquierdo y derecho tendrían 10px de ancho, establecidos dentro del ancho de 500px que contiene < div > - por lo tanto, el área de contenido restante de la tabla sería 480 px.

Puedo hacer fácilmente este tipo de cosas a un < div > mediante el uso de la declaración CSS " ancho: auto. " Puedo fingirlo con una tabla agregando un < div > a su alrededor que usa " ancho: auto " con el borde establecido en esa < div > ;, no en la < tabla > ;.

Sin embargo, espero que exista una solución más elegante (debe ser entre navegadores). ¿Hay alguno que no conozca?

Answer 1

Establezca el div en 480px de ancho y coloque el borde de 10px sobre él. Luego establezca la tabla al 100% de ancho

Answer 2

No estoy seguro de si funcionaría, pero ... ¿podría bordear el primer TD (borde izquierdo) y el último (borde derecho) (o quizás TR) en lugar de la tabla en sí? Eso debería dar el mismo resultado visual.

De lo contrario, no perdería mucho sueño con un DIV envoltorio.

Answer 3

No sé si hay una solución de navegador cruzado. El modelo de cuadro de IE realmente funciona de la manera que desearía: una vez que declara el ancho de un elemento, ese es el ancho, y luego se resta del " interior " ancho del elemento, el margen de relleno y el borde para darle el ancho declarado.

Todos los demás navegadores hacen lo contrario: establecen el ancho del elemento al ancho declarado y luego agregan el margen y el borde del margen.

Acabo de probar su código en IE7 y Firefox 3.5 y ambos parecen tener 500 px de ancho incluso con el borde negro de 10 px. Me preocupan las versiones anteriores de Firefox.