El ancho de columna calculado es diferente del ancho declarado css para la columna. ¿Cómo decide el navegador ancho?

Question

Digamos que tengo una tabla html con un ancho declarado css de 750px. Tiene 5 columnas y cada columna tiene un ancho de 50px, declarado usando css (todas las td tienen un ancho de 50px). Obviamente, la suma de los anchos de las columnas es 250px, que es menor que 750px.

Cuando el navegador muestra la tabla, cada columna tiene un ancho calculado diferente. Tengo una columna que tiene solo 5 espacios pero un ancho calculado de más de 100 px (mucho más que 5  ).

Todas las columnas se ajustan al texto incluido más algunos espacios en blanco adicionales. No hay anchos de columna codificados en el marcado. Solo un 50px en el CSS para 'td'.

¿Cómo calcula el navegador el ancho representado de cada columna?

Answer 1

Cuando establece el ancho de las columnas de la tabla, es solo un ancho mínimo recomendado, que el navegador intenta respetar si es posible. El ancho real de las columnas se calcula a partir del tamaño de su contenido, dividiendo el espacio sobrante de manera uniforme entre las columnas.

Si alguna de las columnas fuera más estrecha que el ancho que ha especificado, el navegador intentaría ajustarla si hay espacio libre en otras columnas, pero en su caso las columnas ya están sobre el mínimo.

El algoritmo real para calcular el tamaño de las celdas difiere de un navegador a otro, lo que significa que las columnas serán un poco diferentes según el navegador que utilice.

Answer 2

Esto se llama el modelo de caja. relleno y bordes se agregan al ancho de los elementos. Entonces, un elemento DIV con padding: 10px; width: 50px; border: 1px solid black; tiene en realidad 72 píxeles de ancho. Espero que tu td tenga un borde o relleno?

Answer 3

Los navegadores intentan ajustar las celdas dentro del ancho de la tabla, expandiendo/contrayendo el td s según sea necesario.

Por lo tanto, establece la tabla en 750px, pero solo dio 250px de ancho. En ese caso, el navegador recurrirá a su esquema de espaciado tradicional donde, en función del contenido de cada celda, intenta espaciar uniformemente las celdas.

Puede leer más acerca de cómo funciona esto here.

Answer 4

Debe usar el estilo de diseño de tabla. Hay 3 valores posibles:

• auto. El valor por defecto. El ancho depende del contenido.
• fijo. Depende de los anchos indicados en el CSS.
• inherit. Hereda el valor de su padre.

En su caso, debe usar table-layout: fixed; en tu elemento de mesa