html - tablas - Cómo hacer que una columna de tabla sea un ancho mínimo.
tablas en html5 (2)
Si conoce los tamaños que desea para su columna y son fijos, le sugiero que utilice un diseño de tabla fijo. Te permite especificar el% fijo que toma cada columna.
Aquí hay un enlace que me ayudó en una situación similar http://css-tricks.com/fixing-tables-long-strings/
Aquí está el archivo de datos de la plantilla: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs
Estoy tratando de hacer que 8 de las 10 columnas de una tabla ocupen solo el ancho mínimo que necesitan, según el texto, respetando el relleno y los encabezados de las columnas.
En la imagen de ejemplo, quiero que todas las columnas, excepto las 4ª y 9ª, ocupen el ancho mínimo. Técnicamente, hay 9 encabezados de columna, y el último tiene una colspan de 2. El último encabezado es un span3. Me gustaría que la columna de porcentaje ocupe el mínimo ancho que se necesita, y deje que la barra de progreso o los botones de pasar / ver / fallar tomen el resto.
La columna 4 está configurada para reemplazar el texto desbordado con puntos suspensivos.
Imagen de ejemplo:
Hay un truco que implica establecer algunas celdas en un ancho muy pequeño y luego aplicar una propiedad de white-space: nowrap :
<table>
<tr>
<td class="min">id</td>
<td class="min">tiny</td>
<td>Fills space</td>
<td>Fills space</td>
<td class="min">123</td>
<td class="min">small</td>
<td>Fills space, wider</td>
<td>Fills space</td>
<td class="min">thin</td>
</tr>
</table>
td {
width: auto;
}
td.min {
width: 1%;
white-space: nowrap;
}
Como también puede ver en el violín anterior, nowrap obliga a la celda de la tabla a evitar saltos de línea y, por lo tanto, alinear su ancho al mínimo posible.
NOTA: Si tiene un thead , también desea aplicar el estilo de td a th .
ACTUALIZACIÓN # 1: Elipsis (...)
Para colapsar automáticamente una columna más larga en puntos suspensivos, el text-overflow: ellipsis es lo que probablemente está buscando:
td.cell-collapse {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
Esto también requiere un overflow establecido en hidden , así como un width o width max-width con un valor fijo. Agregue la clase de cell-collapse a las celdas cuyo ancho desea limitar.
ACTUALIZACIÓN # 2: Manejo de Bootstrap
La clase de la table de Bootstrap establece el width: 100%; lo que estropeará este enfoque. Puedes arreglar eso con la table { width: inherit !important; } table { width: inherit !important; }
NOTA: Las tablas en este enfoque ya tienen ancho total porque las celdas de la tabla ya tienen width: auto; .
Solución anterior basada en Javascript eliminada, ya que el enfoque basado únicamente en CSS ahora funciona de manera consistente en todos los navegadores modernos. El código original todavía está disponible en el JSfiddle vinculado, comentado.