Tabla de fluidos con td nowrap y text-overflow?

Aquí es mi problema HTML:Tabla de fluidos con td nowrap y text-overflow?

<table style="width:100%"> 
    <tr> 
    <td style="width:100%;overflow:hidden"> 
     <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long 
     </div> 
    </td> 
    </tr> 
</table>

Aquí es lo que quería:

<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long 
</div>

Es decir:

No hay barras de desplazamiento horizontal
div No cometa el table y td tan ancho
cambio de tamaño hace que el cambio div dinámica de ellipsis

por cierto, de todos modos para minic text-overflow en Firefox?

Fuente

2011-05-09 est

Hay un enfoque alternativo en esta respuesta en [la forma de mezclar texto de desbordamiento y celdas de la tabla usando CSS] (http://stackoverflow.com/questions/7569436/css-constrain-a -table-with-long-cell-contents-to-page-width). –

Editar: arreglado esto mismo el uso de CSS:

table { table-layout:fixed; width:100%; }

Fuente

2011-05-09 03:14:06 est

https://developer.mozilla.org/en/CSS/table-layout –

Tuve el mismo problema de ancho en los tableros de la mesa y el diseño de la tabla: lo solucioné solucionado gracias. – katmanco

Mi ejemplo completo:

<head> 
    <style> 
     table { 
      width:100%; 
      table-layout:fixed; 
     } 
     td { 
      overflow: hidden; 
      text-overflow: ellipsis; 
      white-space: nowrap; 
     } 
    </style> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
      <td>CHAMPIONNAT</td> 
      <td>CHAMPIONNAT</td> 
      <td>CHAMPIONNAT</td> 
      <td>CHAMPIONNAT</td> 
      <td>CHAMPIONNAT</td> 
      <td>CHAMPIONNAT</td> 
     </tr> 
    </table> 
</body>

Fuente

2012-12-17 20:03:37 Raf

para mí,

<style type='text/css'> 
table { 
white-space: normal; 
} 
</style>

trabajaron ...

Fuente

2012-12-24 06:27:46

En lugar de usando para su mesa, puede usar th es el truco para conseguir un DIV que tomar siempre el espacio completo de un TD con text-overflow: ellipsis; funcionalidad:

div { width: 0; min-width: 100%; }

El truco principal está dando la ancho algo distinto de auto/por ciento, y el uso de un mínimo de ancho de 100%;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
table.myTable { width: 100%; border-collapse: collapse; } 
td { border: 1px solid #000; } 

td.td1 { width: 100%; min-width: 50px; } 
td.td2 { width: 100px; min-width: 100px; } 
td.td3 { width: 150px; min-width: 150px; } 

td.td4 { width: 50%; min-width: 50px; } 
td.td5 { width: 50%; min-width: 50px; } 
td.td6 { width: 150px; min-width: 150px; }

La tabla puede ser de tamaño fluido o ancho fijo. Simplemente proporcione algunos min-width para los contenidos según sea necesario.

<table class="myTable"> 
    <tr> 
     <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td> 
     <td class="td2"><div>Content 2</div></td> 
     <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td> 
    </tr> 
</table> 

<table class="myTable"> 
    <tr> 
     <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td> 
     <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td> 
     <td class="td6"><div>Content 3</div></td> 
    </tr> 
</table>

JSfiddle

Fuente

2014-09-23 16:34:16 Mark

Pregunta anterior, pero esta es una buena respuesta alternativa. – crowebird

Perfecto - Yo diría que ninguna de las otras preguntas cumple con el requisito "fluido" – Eric

Esto ha sido probado en Chrome, Firefox, Safari y hasta IE8. No estoy seguro acerca de las versiones anteriores sin alguna ayuda allí. iPad Safari funciona muy bien también. – Mark

Tabla de fluidos con td nowrap y text-overflow?

Respuesta

Cuestiones relacionadas