html - style - Cómo envolver la celda de la tabla en un ancho máximo en la tabla de ancho completo
link css to html (6)
¿Qué tal un poco de diseño de cuadrícula CSS3 :
.grid {
display: grid;
grid-template-columns: minmax(1fr, auto) auto;
}
.label {
grid-column: 1;
word-break: break-all;
max-width: 300px;
}
.value {
grid-column: 2;
}
<div class="grid">
<div class="label">Short Header</div>
<div class="value">value</div>
</div>
<br/>
<div class="grid">
<div class="label">Short Header</div>
<div class="value">value</div>
<div class="label">Quite Long Header</div>
<div class="value">value</div>
<div class="label">Short Header</div>
<div class="value">value</div>
</div>
<br/>
<div class="grid">
<div class="label">Short Header</div>
<div class="value">value</div>
<div class="label">Quite Long Header</div>
<div class="value">value</div>
<div class="label">MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</div>
<div class="value">value</div>
<div class="label">Quite Long Header</div>
<div class="value">value</div>
</div>
Para ver esto en acción, deberá usar Chrome, ir a chrome://flags y habilitar la opción Habilitar las funciones de la plataforma web experimental .
Obviamente, esto no es de mucha utilidad en este momento, ¡pero ciertamente es algo que esperamos!
Me gustaría tener una tabla con los encabezados en el lado izquierdo, los encabezados deben ser lo más estrechos posible y el espacio para los valores debe ocupar el resto del ancho de la página. Todos los encabezados deben estar en una sola línea, a menos que el contenido de la celda del encabezado sea muy largo, en cuyo punto el encabezado debe ajustarse en varias líneas.
Con contenido corto, esto funciona:
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
CSS:
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
white-space: nowrap;
}
Sin embargo, cuando intento agregar un ancho máximo, en lugar de ajustarlo, el contenido se derrama fuera del cuadro de texto:
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
white-space: nowrap;
max-width: 300px;
word-break: break-all;
}
Demostración: https://jsfiddle.net/2avm4a6n/
Parece que el white-space: nowrap; el estilo anula el word-break: break-all; , por lo que el max-width: 300px; hace que el texto se derrame. Estoy usando el white-space: nowrap; y width: 10px; combinación para hacer que la columna del encabezado sea lo más estrecha posible, sin envolver los encabezados con espacios por debajo del ancho mínimo, pero que tenga solo el width: 10px; y el word-break: break-all; hace que los encabezados se ajusten en caracteres individuales para que quepan en el estrecho 10px.
¿Alguna idea de cómo hacer esto con css?
Déjame saber si esto es lo que buscas:
elimine white-space:nowrap y word-break:break-all y agregue word-wrap:break-word
Vea el siguiente fragmento de código:
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
max-width: 300px;
word-wrap:break-word
}
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
<tr>
<th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
<td>value</td>
</tr>
</table>
ACTUALIZACIÓN: Comentario OP - may 18th
Gracias, esto está cerca, pero no debería envolver los encabezados cortos: solo debería comenzar a ajustarse una vez que la columna del encabezado alcance el ancho máximo
Agrega un min-width a th que mejor se adapte a ti. (Tenga en cuenta que lo que romperá las palabras no recibirá el min-width ) como lo señaló @ Pangloss en un comentario a otra respuesta.
Vea el siguiente fragmento de código:
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
min-width:133px; /* change the value for whatever fits you better */
max-width: 300px;
word-wrap:break-word
}
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
<tr>
<th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
<td>value</td>
</tr>
</table>
Elimine el width la table , de th quita el width , el white-space y el word-break . Agregue a la word-wrap: word-break
También le sugiero que establezca min-width: 150px o cualquier valor que desee. También agregue este td { width: 100%;} .
Aquí está el jsFiddle
th {
text-align: right;
max-width: 300px;
min-width: 150px;
word-wrap: break-word;
}
td {
width: 100%;
}
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
<tr>
<th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
<td>value</td>
</tr>
</table>
Puedes lograr esto dando un ancho a la "th" y hacer que el texto se alinee: izquierda
html
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
<tr>
<th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
<td>value</td>
</tr>
</table>
css
table {
width: 100%;
}
th {
text-align: left;
width: 500px;
}
Fiddle de trabajo: https://jsfiddle.net/2avm4a6n/16/
Si ya sabe cuáles son los datos en <th> , entonces podría ajustar el texto de longitud larga en una etiqueta de <span> o algo así, y ajustar el CSS ligeramente para eso.
table {
width: 100%;
}
th {
text-align: right;
white-space: nowrap;
}
th span {
white-space: normal;
word-break: break-all;
display: block;
}
td {
width: 100%;
}
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
<tr>
<th><span>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</span></th>
<td>value</td>
</tr>
</table>
@Douglas : Creo que has hecho todas las cosas correctamente. pero como en el ejemplo dado y en la pregunta, usted dijo que desea un encabezado estrecho, por lo que le asignó un ancho de 10 px a th . pero si desea lograr un ancho de 10 px en su ejemplo, elimine solo el espacio en blanco: nowrap;
Entonces se asemejó al ejemplo 1 .
Ejemplo 1: https://jsfiddle.net/2avm4a6n/20/
Ejemplo 2: Como todas las respuestas dadas por el usuario, también puedes hacerlo de esa manera.
Ejemplo 3: hay otra opción para usted si desea utilizar espacios en blanco: nowrap; luego aplique una cosa más, es decir , desbordamiento de texto: puntos suspensivos; desbordamiento: oculto; https://jsfiddle.net/2avm4a6n/21/
text-overflow: ellipsis;
overflow: hidden;
EDITAR
Y usa text-align: left; Si quieres que el texto comience desde el lado izquierdo