html - tabla - ¿Por qué el ancho td CSS no funciona?

tablas con imagenes en html ejemplos

Question

Por favor, mira este JSFIDDLE

td.rhead { width: 300px; }

¿Por qué no funciona el ancho de CSS?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Además, ¿cuáles son los efectos de la posición: fijos, absolutos, etc. en anchos td, si los hay? Estoy buscando una razón más que una solución. Espero entender cómo funciona.

Answer 1

Ajustar el contenido de la primera celda en div eg, así:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
width: 300px;
}

Aquí hay un jsfiddle .

Answer 2

Es mejor utilizar table-layout: fixed

Automático es el valor predeterminado y con tablas grandes puede causar un poco de retraso del lado del cliente a medida que el navegador lo recorre para verificar que todos los tamaños quepan.

Fixed es mucho mejor y lo hace más rápido para la página. La estructura de la tabla depende del ancho general de las tablas y del ancho de cada una de las columnas.

Aquí se aplica al ejemplo original: JSFIDDLE , JSFIDDLE que las columnas restantes se aplastan y superponen su contenido. Podemos arreglar eso con CSS más (todo lo que he tenido que hacer es agregar una clase al primer TR):

 table {
width: 100%;
table-layout: fixed;
}
.header-row > td {
width: 100px;
}
td.rhead {
width: 300px
}

Visto en acción aquí: JSFIDDLE

Answer 3

Es posible que esto no sea lo que desea escuchar, sino que display: table-cell no respeta el ancho y se colapsará en función del ancho de toda la tabla. Puede solucionar esto fácilmente con solo tener una display: block elemento de display: block dentro de la celda de la tabla cuyo ancho especifique, por ejemplo

<td><div style="width: 300px;">wide</div></td>

Esto no debería marcar una gran diferencia si la <table> sí misma es la position: fixed o absoluta porque la posición de las celdas es totalmente estática con respecto a la tabla.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDITAR: No me puedo atribuir el mérito, pero como dicen los comentarios, puedes usar min-width lugar de width en la celda de la tabla.

Answer 4

Intenta usar

table {
table-layout: auto;
}

Si usa Bootstrap, la table clase tiene table-layout: fixed; por defecto.

Answer 5

La razón es que no especificaste el ancho de la tabla, y tu montón de td están desbordados.

Esto, por ejemplo , le he dado a la mesa un ancho de 5000px, que pensé que se ajustaría a sus requisitos.

table{
width:5000px;
}

Es exactamente el mismo código que proporcionó, que simplemente agregué en el ancho de la tabla.

Creo que lo que está sucediendo es porque tus TD están más allá del ancho predeterminado de la mesa. Lo cual puedes ver, si sacas aproximadamente 45 de tus td en cada tr (es decir, el código que proporcionaste en tu pregunta, no jsfiddle) funciona exactamente bien

Answer 6

La razón por la que no funciona en el enlace que usted proporcionó es porque está tratando de mostrar una columna de 300px PLUS 52 columnas con un lapso de 7 columnas cada una. Reducir el número de columnas y funciona. No se puede incluir tantos en la pantalla.

Si desea forzar el ajuste de las columnas, intente configurar:

body {min-width:4150px;}

ver mi jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike No puedo comentar todavía.

Answer 7

Mi loca solución.)

$(document).ready(function() {
$("td").each(function(index) {
var htmlText = "<div style=''width:300px;''>" + $(this).text() +"</div>";
$(this).html(htmlText);
});
});

Answer 8

Prueba esto, funciona

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Answer 9

Si el ancho de la tabla es, por ejemplo, 100%, intente usar un ancho de porcentaje en td, como 20%.

Answer 10

También puedes usar:

.rhead {
width:300px;
}

pero esto solo con algunos navegadores, si mal no recuerdo, IE8 no permite esto. Sobre todo, es más seguro simplemente poner el atributo width="" en el <td> mismo.

Answer 11

Utilice la propiedad de diseño de tabla y el valor "fijo" en su tabla.

table {
table-layout: fixed;
width: 300px; /* your desired width */
}

Después de configurar todo el ancho de la tabla, ahora puede configurar el ancho en% de los tds.

td:nth-child(1), td:nth-child(2) {
width: 15%;
}

Puede obtener más información sobre en este enlace: http://www.w3schools.com/cssref/pr_tab_table-layout.asp