espacio - tablas en html5
¿Cómo puedo establecer un ancho<td> para truncar visualmente los contenidos mostrados? (5)
Estoy tratando de establecer un ancho de columna de una tabla, que funciona bien hasta que llega al punto en que los elementos secundarios se truncarán visualmente ... y luego no será más pequeño. ("visualmente truncado", lo que no se ajusta parece estar oculto detrás de la siguiente columna)
Aquí hay un código de muestra para demostrar mi problema:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// shrink and set width size
td1.currentShrinkCount--;
td1.width = td1.currentShrinkCount; // does nothing if truncating!
// set reporting values in right cell
td2.innerHTML = "Desired Width : ["
+ td1.currentShrinkCount
+ "], Actual : ["
+ td1.offsetWidth + "]";
// Stop shrinking
if( 1 >= td1.currentShrinkCount)
window.clearInterval(intervalID);
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="td1">
Extra_long_filler_text
</td>
<td id="td2">
Desired Width : [----], Actual : [----]
</td>
</tr>
</table>
<button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>
He intentado configurar el ancho de diferentes maneras, incluyendo
td1.offsetWidth = td1.currentShrinkCount;
y
td1.width = td1.currentShrinkCount + "px";
y
td1.style.width = td1.currentShrinkCount + "px";
y
td1.style.posWidth = td1.currentShrinkCount;
y
td1.scrollWidth = td1.currentShrinkCount;
y
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
y
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
y
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
Me doy cuenta, probablemente podría usar DIV, pero preferiría no hacerlo ya que la tabla se genera desde un control dependiente, y realmente no quiero entrar en la reescritura de los controles asp.net.
Habiendo dicho eso, pensé que como último esfuerzo, al menos podría envolver los contenidos de cada ''td1 con un DIV, y el desbordamiento se haría cargo de las cosas, pero incluso reemplazaría
<td id="td1">
Extra_long_filler_text
</td>
con
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
no funcionó
¿Alguien sabe cómo puedo establecer un ancho para truncar visualmente sus contenidos?
Por cierto, mi navegador de destino es IE7. Otros navegadores no son importantes en este momento, ya que esta es una aplicación interna.
Acabo de intentar agregar table-layout: fixed; a la <table> y funcionó para mí en IE7.
En un diseño de tabla fija, el diseño horizontal solo depende del ancho de la tabla, el ancho de las columnas y no el contenido de las celdas
Mira la documentación .
Hasta donde yo sé, una celda de la tabla siempre se estirará para acomodar su contenido.
¿Ha pensado en usar Javascript para truncar dinámicamente los datos en celdas de tabla que tienen más de una cierta cantidad de contenido? Alternativamente, podría hacer esto más fácilmente desde el lado del servidor.
Puede usar jQuery o javascript simple para rodear el contenido de su (s) celda (s) con etiquetas div y establecer un ancho y desbordamiento fijo: oculto en aquellos en su lugar. No es hermoso, pero funcionaría.
ETA:
<td><div style="width:30px;overflow:hidden">Text goes here</div></td>
Como el DIV es el elemento delimitador, aquí es donde debe establecerse el ancho.
<td id="td1" style="overflow-x:hidden;">
Debiera ser
<td id="td1" style="overflow:hidden;">
overflow-x es un atributo CSS de Microsoft, que ahora es parte de CSS3. Me quedaría con el antiguo atributo de desbordamiento.
EDITAR:
Como menciona Paolo, también necesitas agregar table-layout: fixed; y especifica el ancho de la tabla. Un ejemplo completo sigue.
<html>
<head>
<style>
table
{
table-layout:fixed;
width:100px;
}
td
{
overflow:hidden;
width:50px;
border-bottom: solid thin;
border-top:solid thin;
border-right:solid thin;
border-left:solid thin;
}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
Solución CSS
"Truncar" puede no ser la palabra que estás buscando. Es posible que desee ocultar los caracteres desbordados. Si ese es el caso, busque en el "desbordamiento" de css-property, que ocultará cualquier contenido que se extienda más allá de los límites declarados de su contenedor.
td div.masker {
height:25px;
width:100px;
overflow:hidden;
}
<td>
<div class="masker">
This is a string of sample text that
should be hidden when it reaches out of the bounds of the parent controller.
</div>
</td>
Solución Javascript
Si realmente desea truncar el texto dentro del contenedor, tendrá que eliminar un carácter de la derecha, probar el ancho del elemento primario y continuar eliminando caracteres y probando el ancho principal hasta que el ancho principal coincida con el ancho declarado.
while (parent.width > desiredWidth) {
remove one char from right-side of child-text
}