ocultar texto con "overflow:hidden" dentro de una tabla

[vic4ever]

hola!

haber, lo que estoy intentando es que cuando se haga mas pequeña una celda, el texto que esta dentro, si no cabe se oculte.

he encontrado la propiedad overflow:hidden y si se lo aplico a un DIV funciona correctamente.

ejemplo:

Código PHP:

  <div style="width:100%;overflow: hidden;text-overflow:ellipsis">
    holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div> 
   

el resultado es el esperado, el problema es que yo quiero tener ese DIV dento de unas tablas y es ahi cuando ya no hace su efecto el overflow...

por ejemplo en Mozilla si hace el efecto aunque este dento de una tabla.

asi seria el codigo que no funciona:

Código PHP:

  <table width="100%">
    <tr>
      <td>ALGO</td>
      <td ><div style="width:100%;overflow: hidden;text-overflow:ellipsis">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
      <td>ALGO MAS</td>
    </tr>
</table> 
   

alguna idea?

[vic4ever]

alguna sugerencia?

[yogiri]

Primero, segun la w3c no debes poner mas los estilos dentro del tag, es decir, la propiedad style no va a existir mas, por lo tanto, hazlo dentro de un archivo CSS.

Ahora bien, respecto a lo que pides haz esto:

Para una tabla:

Código PHP:

  <table id="my_table" size="4" border="0" cellspacing="0" cellpadding="0"
    <tr>
        <td class="primera_col">Contenido largo</td>
    </tr>
</table> 
   

El siguiente CSS:

Código PHP:

  #my_table{
table-layout: fixed; 
}

#my_table td{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} 
   

Para dar tamaño a los td (ya que son fijos) debes darselos con '%' sino no funcionara:

Código PHP:

  .primera_col{
width:10%;
} 
   

Espero te sirva!

[vic4ever]

Bueno, el tema del STYLE, ok, lo tengo claro, simplemente era un ejemplo.

en cuanto al efecto, ok!, funciona de perlas.. me imagino que será por el fixed, porque anda que que no probe formas de ponerlo, con capa, sin capa, en el td, tr, table, etc..

funciona bien, pero cuando he ido a probarlo en Mozilla, , no funciona..
curioso, pero en mozilla solo parece que funciona como dije antes, poniendo el contenido del td dentro de un div, y si, asi funciona ok! lo unico que no muestra los "..."

me imagino que lo dejare con el div, y con hojas de estilo diferentes segun navegador.


saludos.

[yogiri]

El tema de los "..." es por mozilla, te "wrapea" el texto, pero no te muestra los puntitos. A mi no me molesta, suficiente me parece. Una lastima porque queda lindo,pero bue, espero que lo arreglen.

Saludos!