Usando CSS td ancho absoluto, posición


103

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.

td ancho no es 300px como se desea


display: table-cellno respeta width(de la misma manera que no funcionaría display: inline). No entiendo sobre qué me preguntasposition fixed|absolute
Explosion Pills

@ExplosionPills porque en mi código real, tengo la tabla configurada como fija. Como puede adivinar, estoy tratando de lograr una línea de tiempo en la parte superior de la página. Así que solo digo en caso de que el atributo de posición afecte los anchos.
Jake

Respuestas:


144

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.


31
+1: he utilizado esta solución alternativa antes. Por extraño que parezca, min-widthen el TDparece que no funciona en Chrome y FF: jsfiddle.net/Mkq8L/7
Tim Medora

2
En realidad, como siempre, después de publicar la pregunta, ¡descubrí que min-width: 300pxfunciona! (@TimMedora, ¡fuiste unos segundos más rápido!)
Jake

Creo que la mejor respuesta es mencionar display: comportamiento de tabla-celda. ¡Gracias!
Jake

Este comportamiento tiene sentido para mí: ¿qué debería suceder si establece dos anchos diferentes para dos celdas en la misma columna? Sin min-widthembargo, no hay problema, tome el más grande.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

3
Esto es un truco, no lo recomiendo. El ancho td combinado está desbordando el ancho de la mesa. Este es el problema. No debería solucionar este problema añadiendo más estructuras HTML.
David

28

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


11

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.


2
+1 por descubrir que el umbral del ancho de la mesa aumenta con el ancho del cuerpo.
Jake

8

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


2
+1 por mencionar que hay un umbral de ancho de mesa. El problema es que a veces no conocemos el ancho total de antemano. ¿Cuál es el ancho predeterminado de la mesa?
Jake

De hecho, no lo sé. Todo lo que sé es que si tiene demasiadas columnas, la tabla se aplastará, dejando inútiles todos los anchos de los nodos secundarios. Me he encontrado con esto antes, pero todavía no he descubierto el valor predeterminado. Tal vez debería hacer eso como una pregunta.
He Hui

Creo que resolví este problema stackoverflow.com/questions/14767459/…
He Hui

Esta es la respuesta real, en lugar de la altamente calificada. El ancho solo se puede establecer si el contenido no desborda todo el ancho de la tabla.
David


5

Tratar de usar

table {
  table-layout: auto;
}

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


4

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


3

Mi loca solución.)

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

2

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


2

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 .


1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.