html - tablas - Haga el ancho de la tabla al 100% con el resto de relleno de la última columna sin aplastar el contenido/ancho de otras columnas

tablas en html5

Question

¿Es posible hacer una tabla (que tendrá un texto creado dinámicamente) para tener, por ejemplo:

ancho de la tabla 100% de la pantalla 5 columnas última columna está vacía () las primeras cuatro columnas tienen texto y su anchura dinámica.

Tengo esto hasta ahora y aplasta el texto que es lo que trato de evitar:

<table style="width:100%;" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td style="width:100%;">&nbsp;</td>
</tr>
</table>

No puedo usar "espacio en blanco: ahora", ya que quiero que el texto se ajuste si hay suficiente texto.

Edit: "Me gustaría que las [primeras cuatro] columnas sean el ancho que tendrían si eliminara el atributo de ancho de la etiqueta de la tabla. Pero aún así, la tabla debe ser del 100% del ancho de la página".

¿Algunas ideas? Soluciones CSS preferibles!

Answer 1

¿Quizás en lugar de configurar la última columna al 100%, configurarlo en automático?

<table style="width:100%;" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td style="width:auto;">&nbsp;</td>
</tr>
</table>

Answer 2

Depende de las tecnologías que tengas disponibles, pero quizás puedas intentarlo.

/* CSS3 method */
table {
width: 100%;
}
table td:nth-child(-n+4) {
min-width: 25%; /* Or set the minimum PX/Percent width */
}
/* CSS2 without nth-child selector */
table {
width: 100%;
}
table td,
table td + td,
table td + td + td,
table td + td + td + td {
min-width: 25% /* Or set the minimum PX/Percent width */
} 

Esto debería establecer el ancho de las áreas de contenido y permitir que la columna final encuentre su ancho dinámicamente.

Otro método podría ser hacer algo como esto, asumiendo que puedes poner contenido dentro de tus tablas.

/*Markup*/
<table width="100%" border="1">
<tr>
<td>
<div>One</div>
</td>
<td>
<div>Two</div>
</td>
<td>
<div>Three</div>
</td>
<td>
<div>Four</div>
</td>
<td>
<div>Five</div>
</td>
<td>
<div>&nbsp;</div>
</td>
</tr>
</table>
/* CSS3 method */
table {
width: 100%;
}
table td:nth-child(-n+4) div {
min-width: 100px;
}
/* CSS2 without nth-child selector */
table {
width: 100%;
}
table td div,
table td + td div,
table td + td + td div,
table td + td + td + td div {
min-width: 100px;
} 

Answer 3

Esto es lo que funcionó para mí (en Firefox, Chrome y la vieja 12.x Opera). Mis tablas, que quería tener un ancho del 100% y la última columna para completar el resto, tiene la clase tableList y aquí está CSS:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it''s less than 100% in the end, but this still works for me */

A continuación, hay un fragmento para probar:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it''s less than 100% in the end, but this still works for me */

<table class="tableList">
<tr><td>game''s</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>

Como Rahat ha notado, si el contenido de una columna diferente a la primera es más de una palabra, se convierte en multilínea (una línea por palabra):

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it''s less than 100% in the end, but this still works for me */

<table class="tableList">
<tr><td>game''s</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

pero también ha sugerido una solución alternativa: agregar white-space: nowrap :

.tableList { width: 100%; }
.tableList td { width: 1px; white-space: nowrap; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it''s less than 100% in the end, but this still works for me */

<table class="tableList">
<tr><td>game''s</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

Answer 4

Intenta esto, ocupará el 100% de ancho sin aplastar la última columna

<table style="width:100%" border=1>
<tr style="visibility:hidden">
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
</tr>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td></td>
</tr>
</table>

deje la quinta columna en blanco y el ancho se dividirá en partes iguales

Answer 5

Parece que desea que el navegador determine "inteligentemente" el ancho que debe tener cada columna. Desea que las columnas se ajusten, pero no desea que sus anchos sean demasiado pequeños. El problema es que cuando está completamente a la altura del navegador, el navegador puede elegir arbitrariamente el ancho de cada columna. 10 píxeles? 100 píxeles? Claro, ambos serían válidos si no le das ninguna pista al navegador.

Puede probar min-width max-width como un compromiso para que los anchos de columna sean dinámicos pero dentro de un cierto rango.

Si es posible que una columna sea realmente estrecha (por ejemplo, si los datos en esa columna consisten en números de un solo dígito), entonces es preferible utilizar solo el ancho máximo.

Answer 6

Pruebe este método, podría funcionar para usted.

.myTable {
width: 100%;
}
.myTable td:last-child {
width: auto;
}

<table class="myTable" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td>&nbsp;</td>
</tr>
</table>

O a través de CSS:

table {
width: 100%;
}
table td:nth-child(-n+4) div
{
min-width: 100px;
}

Answer 7

Puedes usar flexbox para lograr esto

CSS

table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
tr {
display: flex;
align-items: stretch;
}
td:last-child {
flex: 1;
background: yellow;
display:inline-block;
/* to keep IE happy */
}

FIDDLE (cambiar el tamaño de la ventana del navegador para ver esto en acción)

table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
td:last-child {
background: yellow;
}

<table>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td>&nbsp;f</td>
</tr>
</table>

NÓTESE BIEN:

IE 10-11 tiene el problema de que los elementos en línea (y aparentemente también las celdas de la tabla) no se tratan como elementos flexibles.

Este problema está documentado por Phillip Walton here y la solución (de la publicación anterior) es:

Este problema se puede evitar agregando un valor de visualización no en línea a los elementos, por ejemplo, bloque, bloque en línea, flexión, etc.

Por cierto: lo siguiente es lo que parece el mismo violín de arriba sin usar flexbox . Tenga en cuenta que el último td no llena el espacio restante, sino que ocupa su propio espacio natural, que es lo que el OP no quería.

Answer 8

Resolví el mismo problema usando max-width = 99% para la última columna y asigné tamaños fijos a las otras columnas.

<table style=''width: 100%'' border=''1''>
<tr>
<td style=''width:60px''><b>Label 1</b></td>
<td style=''width:120px;''><b>Label 2</b></td>
<td style=''max-width:99%;''><b>Label 3</b></td>
</tr>
</table>

Answer 9

Sí, esto no es tan difícil, aunque a veces varios navegadores mostrarán esto de manera un poco diferente. En realidad, hay varias formas de hacer esto, pero esta es mi favorita. Las primeras filas son solo una lista de los nombres de los campos y también establecen el ancho de cada columna ... excepto la última.

<table style=''width: 100%'' border=''1''>
<tr>
<td style=''width:100px;''><b>Label 1</b></td>
<td style=''width:120px;''><b>Label 2</b></td>
<td style=''width:60px;''><b>Label 3</b></td>
<td style=''width:100px;''><b>Label 4</b></td>
<td><b>Label 5</b></td>
</tr>
<!-- insert dynamically generated rows -->
</table>

Descubrí que esto funciona bien, especialmente si necesita solo uno de los campos para ocupar el resto. Todo lo que hace es establecer los tamaños de los campos que necesita constantemente y dejar el que no necesita.

Otra forma de hacer esto es definir las clases de css con los anchos específicos, ¡pero esa es otra forma de formatear la misma hoja de estilo, en realidad!

Answer 10

Solo agrega

table-layout: fixed; 

a tu mesa, y listo.

Suponiendo que sus textos en las otras columnas no fuerzan una tabla más ancha que el 100%, su última columna siempre se estirará, por lo que no es necesario aplicar ningún ancho en la <td>.

Answer 11

prueba esto ( Demo )

table {
width:100%;
table-layout: fixed;
}
td:last-child {
background: yellow;
width:200px;
layout:
}
<table border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td></td>
</tr>
</table>