Usando CSS td ancho absoluto, posición

Consulte 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: fijo, absoluto, etc., en los anchos td, si los hay? Estoy buscando una razón más que una solución. Espero entender cómo funciona.

Es posible que esto no sea lo que desea escuchar, pero display: table-cellno respeta el ancho y se contraerá en función del ancho de toda la mesa. Puede solucionar esto fácilmente con solo tener un display: blockelemento dentro de la celda de la tabla cuyo ancho especifique, por ejemplo

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

Esto no debería hacer mucha diferencia si el <table>mismo es position: fixedo absoluto porque la posición de las celdas es estática en relación con la tabla.

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

EDITAR: No puedo tomar el crédito, pero como dicen los comentarios, puede usar en min-widthlugar de widthen la celda de la tabla.

Es mejor usar table-layout: fixed

Auto es el valor predeterminado y con tablas grandes puede causar un poco de retraso en el lado del cliente cuando el navegador lo recorre para verificar que todos los tamaños encajen.

Fixed es mucho mejor y se muestra más rápido en la página. La estructura de la tabla depende del ancho total de la tabla y del ancho de cada una de las columnas.

Aquí se aplica al ejemplo original: JSFIDDLE , notará que las columnas restantes están trituradas y superpuestas su contenido. Podemos arreglar eso con más CSS (todo lo que tuve 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

La razón por la que no funciona en el enlace que proporcionó es porque está tratando de mostrar una columna de 300px MÁS 52 columnas de 7 columnas cada una. Reduzca el número de columnas y funciona. No caben tantos en la pantalla.

Si desea forzar que las columnas encajen, intente configurar:

body {min-width:4150px;}

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

La razón es que no especificó el ancho de la tabla y todo su grupo de td está desbordado.

Esto, por ejemplo , le he dado a la tabla un ancho de 5000px, que pensé que se adaptarí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 sus TD están muy por encima del ancho de tabla predeterminado. Lo que podría ver, si saca aproximadamente 45 de sus td en cada tr, (es decir, el código que proporcionó en su pregunta, no jsfiddle) funciona exactamente bien

Prueba esto funciona.

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

Tratar de usar

table {
  table-layout: auto;
}

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

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 mesa, ahora puede configurar el ancho en% de los td.

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

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

Mi loca solución.)

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

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

Envuelva el contenido de la primera celda en div, por ejemplo, así:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Aquí hay un jsfiddle .

También puedes usar:

.rhead {
    width:300px;
}

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