tablas - tr html
CSS: truncar las celdas de la tabla, pero ajustar tanto como sea posible (18)
Como respuesta de samplebias, nuevamente si Javascript es una respuesta aceptable, hice un complemento jQuery específicamente para este propósito: https://github.com/marcogrcr/jquery-tableoverflow
Para usar el plugin solo escribe
$(''selector'').tableoverflow();
Ejemplo completo: http://jsfiddle.net/Cw7TD/3/embedded/result/
Ediciones:
- Arreglo en jsfiddle para compatibilidad con IE.
- Solución en jsfiddle para una mejor compatibilidad del navegador (Chrome, Firefox, IE8 +).
Conoce a Fred. El es una mesa
<table border="1" style="width: 100%;">
<tr>
<td>This cells has more content</td>
<td>Less content here</td>
</tr>
</table>
El apartamento de Fred tiene el extraño hábito de cambiar de tamaño, por lo que aprendió a ocultar parte de su contenido para no empujar a todas las demás unidades y empujar la sala de estar de la Sra. Whitford al olvido:
<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
<td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
</tr>
</table>
Esto funciona, pero Fred tiene una sensación molesta de que si su celda derecha (a la que se le conoce como Celldito) cediera un poco de espacio, su celda izquierda no se truncaría tanto como la mayor parte del tiempo. ¿Puedes salvar su cordura?
En resumen: ¿Cómo pueden las celdas de una tabla desbordarse de manera uniforme, y solo cuando todas han abandonado todo su espacio en blanco?
Compruebe si "nowrap" resuelve el problema hasta cierto punto. Nota: nowrap no es compatible con HTML5
<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content </td>
<td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>
Creo que tengo una solución no javascript! Mejor tarde que nunca, ¿cierto? Después de todo, esta es una excelente pregunta y Google está por todas partes. No quería conformarme con una solución de javascript porque encuentro que la ligera inquietud de las cosas que se mueven por ahí después de que la página se haya cargado es inaceptable.
Caracteristicas :
- No javascript
- Sin diseño fijo
- Sin ponderación ni trucos de ancho porcentual.
- Funciona con cualquier cantidad de columnas.
- Generación sencilla del lado del servidor y actualización del lado del cliente (no es necesario ningún cálculo)
- Compatible con varios navegadores
Cómo funciona : Dentro de la celda de la tabla, coloque dos copias del contenido en dos elementos diferentes dentro de un elemento contenedor relativamente posicionado. El elemento espaciador está posicionado estáticamente y como tal afectará el ancho de las celdas de la tabla. Al permitir que el contenido de la celda espaciadora se ajuste, podemos obtener el ancho de "mejor ajuste" de las celdas de la tabla que estamos buscando. Esto también nos permite usar el elemento de posición absoluta para restringir el ancho del contenido visible al de la posición principal primaria.
Probado y trabajando en: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera
Imágenes de resultados :
JSFiddle : http://jsfiddle.net/zAeA2/
Ejemplo HTML / CSS :
<td>
<!--Relative-positioned container-->
<div class="container">
<!--Visible-->
<div class="content"><!--Content here--></div>
<!--Hidden spacer-->
<div class="spacer"><!--Content here--></div>
<!--Keeps the container from collapsing without
having to specify a height-->
<span> </span>
</div>
</td>
.container {
position: relative;
}
.content {
position: absolute;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spacer {
height: 0;
overflow: hidden;
}
Dado que ''table-layout: fix'' es el requisito de diseño esencial, que crea columnas no ajustables espaciadas uniformemente, pero que necesita hacer celdas de diferentes anchos de porcentaje, ¿tal vez establecer el ''colspan'' de sus celdas en un múltiplo?
Por ejemplo, usar un ancho total de 100 para cálculos de porcentajes sencillos y decir que necesita una celda del 80% y otra del 20%, considere:
<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
<tr>
<td colspan=100>
text across entire width of table
</td>
<tr>
<td colspan=80>
text in lefthand bigger cell
</td>
<td colspan=20>
text in righthand smaller cell
</td>
</TABLE>
Por supuesto, para las columnas de 80% y 20%, solo puede configurar el colspan de celdas de 100% de ancho a 5, el 80% a 4 y el 20% a 1.
El problema es el ''table-layout: fixed'' que crea columnas de ancho fijo y espaciado uniformemente. Pero deshabilitar esta propiedad css eliminará el desbordamiento de texto porque la tabla se volverá lo más grande posible (y de lo que no se puede observar el desbordamiento).
Lo siento, pero en este caso Fred no puede tener su pastel y comérselo a ... a menos que el propietario le dé a Celldito menos espacio para trabajar, Fred no puede usar el suyo.
Esta pregunta aparece en la parte superior de Google, así que en mi caso, usé el fragmento de código css de https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ pero aplicarlo a la td NO dio El resultado deseado.
Tuve que agregar una etiqueta div alrededor del texto en el td y los puntos suspensivos finalmente funcionaron.
Código HTML abreviado;
<table style="width:100%">
<tr>
<td><div class=''truncate''>Some Long Text Here</div></td>
</tr>
</table>
CSS abreviado;
.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
Hay una solución mucho más fácil y más elegante.
Dentro de la celda de tabla en la que desea aplicar el truncamiento, simplemente incluya un div contenedor con css table-layout: corregido. Este contenedor ocupa todo el ancho de la celda de la tabla principal, por lo que incluso actúa con capacidad de respuesta.
Asegúrese de aplicar el truncamiento a los elementos de la tabla.
Funciona desde IE8 +
<table>
<tr>
<td>
<div class="truncate">
<h1 class="truncated">I''m getting truncated because I''m way too long to fit</h1>
</div>
</td>
<td class="some-width">
I''m just text
</td>
</tr>
</table>
y css:
.truncate {
display: table;
table-layout: fixed;
width: 100%;
}
h1.truncated {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Aquí hay un Fiddle en funcionamiento https://jsfiddle.net/d0xhz8tb/
Me he enfrentado al mismo desafío hace unos días. Parece que found la mejor solución.
Pero noté que debería duplicar el contenido en el elemento espaciador. Pensé que no es tan malo, pero también me gustaría aplicar la ventana emergente de title para el texto recortado. Y significa que el texto largo aparecerá por tercera vez en mi código.
Aquí propongo acceder al atributo de title desde :after pseudo-elemento para generar espaciador y mantener limpio el HTML.
Funciona en IE8 +, FF, Chrome, Safari, Opera
<table border="1">
<tr>
<td class="ellipsis_cell">
<div title="This cells has more content">
<span>This cells has more content</span>
</div>
</td>
<td class="nowrap">Less content here</td>
</tr>
</table>
.ellipsis_cell > div {
position: relative;
overflow: hidden;
height: 1em;
}
/* visible content */
.ellipsis_cell > div > span {
display: block;
position: absolute;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em;
}
/* spacer content */
.ellipsis_cell > div:after {
content: attr(title);
overflow: hidden;
height: 0;
display: block;
}
No sé si esto ayudará a alguien, pero resolví un problema similar especificando tamaños de ancho específicos en porcentaje para cada columna. Obviamente, esto funcionaría mejor si cada columna tiene un contenido con un ancho que no varíe demasiado.
Podrías intentar "ponderar" ciertas columnas, como esta:
<table border="1" style="width: 100%;">
<colgroup>
<col width="80%" />
<col width="20%" />
</colgroup>
<tr>
<td>This cell has more content.</td>
<td>Less content here.</td>
</tr>
</table>
También puedes probar algunos ajustes más interesantes, como usar columnas de 0% de ancho y usar una combinación de la propiedad CSS de white-space .
<table border="1" style="width: 100%;">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tr>
<td>This cell has more content.</td>
<td style="white-space: nowrap;">Less content here.</td>
</tr>
</table>
Tienes la idea
Recientemente he estado trabajando en ello. Echa un vistazo a esta prueba jsFiddle , pruébalo tú mismo cambiando el ancho de la tabla base para verificar el comportamiento).
La solución es incrustar una tabla en otra:
<table style="width: 200px;border:0;border-collapse:collapse">
<tbody>
<tr>
<td style="width: 100%;">
<table style="width: 100%;border:0;border-collapse:collapse">
<tbody>
<tr>
<td>
<div style="position: relative;overflow:hidden">
<p> </p>
<p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="white-space:nowrap">Less content here</td>
</tr>
</tbody>
</table>
¿Está Fred feliz ahora con la expansión de Celldito?
Sí, yo diría que treintadot lo tiene, no hay manera de hacerlo a menos que uses un método js. Se trata de un conjunto complejo de condiciones de representación que deberá definir. por ejemplo, qué sucede cuando ambas celdas se están volviendo demasiado grandes para sus apartamentos, tendrá que decidir quién tiene prioridad o simplemente darles un porcentaje del área y, si están demasiado llenos, ocuparán esa área y solo si una tiene espacios en blanco estiras tus piernas en la otra celda, de cualquier manera no hay manera de hacerlo con css. Aunque hay algunas cosas bastante divertidas que la gente hace con css que no he pensado. Aunque realmente dudo que puedas hacer esto.
Si Javascript es aceptable, armo una rutina rápida que podrías usar como punto de partida. Intenta dinámicamente adaptar los anchos de celda utilizando el ancho interno de un tramo, en reacción a los eventos de cambio de tamaño de la ventana.
Actualmente, se supone que cada celda normalmente obtiene el 50% del ancho de la fila, y colapsará la celda derecha para mantener la celda izquierda en su ancho máximo para evitar el desbordamiento. Podría implementar una lógica de equilibrio de ancho mucho más compleja, dependiendo de sus casos de uso. Espero que esto ayude:
Marcado para la fila que utilicé para la prueba:
<tr class="row">
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
<td style="overflow: hidden; text-overflow: ellipsis">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
</tr>
JQuery que conecta el evento de cambio de tamaño:
$(window).resize(function() {
$(''.row'').each(function() {
var row_width = $(this).width();
var cols = $(this).find(''td'');
var left = cols[0];
var lcell_width = $(left).width();
var lspan_width = $(left).find(''span'').width();
var right = cols[1];
var rcell_width = $(right).width();
var rspan_width = $(right).find(''span'').width();
if (lcell_width < lspan_width) {
$(left).width(row_width - rcell_width);
} else if (rcell_width > rspan_width) {
$(left).width(row_width / 2);
}
});
});
Simplemente agrega las siguientes reglas a tu td :
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;
Ejemplo:
table {
width: 100%
}
td {
white-space: nowrap;
}
.td-truncate {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 0;
}
<table>
<tr>
<td>content</td>
<td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
<td>other content</td>
</tr>
</table>
PD: si desea establecer un ancho personalizado para otra td use la propiedad min-width .
Tuve el mismo problema, pero necesitaba mostrar varias líneas (donde el text-overflow: ellipsis; falla). Lo resuelvo usando un área de textarea dentro de un TD y luego lo estilo para que se comporte como una celda de tabla.
textarea {
margin: 0;
padding: 0;
width: 100%;
border: none;
resize: none;
/* Remove blinking cursor (text caret) */
color: transparent;
display: inline-block;
text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
&:focus {
outline: none;
}
}
Use algún css hack, parece la display: table-column; puede venir a rescatar:
<div class="myTable">
<div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
<div class="staticCell">Less content</div>
</div>
.myTable {
display: table;
width: 100%;
}
.myTable:before {
display: table-column;
width: 100%;
content: '''';
}
.flexibleCell {
display: table-cell;
max-width:1px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.staticCell {
white-space: nowrap;
}
JSFiddle: http://jsfiddle.net/blai/7u59asyp/
puede configurar el ancho de la celda derecha al mínimo del ancho requerido, luego aplicar overflow-hidden + text-overflow al interior de la celda izquierda, pero Firefox tiene errores aquí ...
Aunque, parece, flexbox puede ayudar.
<table border="1" style="width: 100%;">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tr>
<td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
<td style="white-space: nowrap;">Less content here.</td>
</tr>
</table>