Come posso utilizzare i puntini di sospensione in una tabella di larghezza del fluido senza rendere ogni colonna della stessa dimensione?

Question

Diciamo che le mie colonne in una tabella sono id, name, description e phone. La colonna description è di 1-255 caratteri, ma l'ID ha un massimo di 3 caratteri.

Mi piacerebbe che le colonne fossero dimensionate correttamente piuttosto che ogni colonna avesse le stesse dimensioni. E mi piacerebbe che la colonna description esagerasse con i puntini di sospensione quando la finestra è troppo piccola per adattarsi al contenuto nella sua interezza.

table-layout:fixed; è il modo standard per eseguire text-overflow: ellipsis; ma ridimensiona tutte le colonne alla stessa dimensione. Preferirei mantenere le larghezze auto anziché fisse.

Potete essere d'aiuto?

Ecco la mia jsFiddle: http://jsfiddle.net/RQhkk/1/

Ecco uno screenshot di quello che ho a che fare con:

Notate come Table 1 rende tutte le colonne delle stesse dimensioni? È terribile.

Nota come Table 2 dimensiona le colonne in base al contenuto? Quello è buono. Tranne quando il contenuto è troppo lungo: Table 3. Quindi non va bene. In tal caso mi piacerebbe che traboccasse su un'ellissi.

Ed ecco la mia tabella di codice HTML e CSS:

<div id="t1"> 
<table> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>name</th> 
      <th class="ellipsis">description</th> 
      <th>phone</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>alpha</td> 
      <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
      <td>555-555-5555</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>beta</td> 
      <td class="ellipsis">Sed et nulla neque.</td> 
      <td>555-555-5555</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>gamma</td> 
      <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td> 
      <td>555-555-5555</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

<style> 
#t1 table { 
    table-layout:fixed; 
    width:100%; 
} 
#t1 td { 
    white-space: nowrap; 
} 
#t1 td.ellipsis { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
} 
</style> 

Se rimuovo il la larghezza delle colonne sono ciò che ci si aspetta - dimensionata per il contenuto. Sfortunatamente non riesco a far funzionare i puntini di sospensione senza il layout fisso. Dove sto andando male?

Answer 1

Dovrebbe funzionare se si specifica un max-width per td.ellipsis.

Answer 2

La mia soluzione è usare jquery per ottenere la larghezza massima del testo all'interno della colonna e assegnarli alla larghezza del contenuto, ad eccezione della colonna di ellissi che sarà la dimensione massima.

Il mio esempio jsfiddle può essere trovato qui http://jsfiddle.net/qt7eQ/1/

<script type="text/javascript"> 
$(function() { 
    //add a innerParagraph block element to all columns except for the one that has the class ellipsis 
    $("#t3 tr td:not(.ellipsis)").wrapInner(function() { 
      return "<p class='innerParagraph'></p>"; 
    }); 

    //get the first column and assign it the width of the elements in the first column 
    $("#t3 tr th:nth-child(1)").width(getMaxWidthOf("#t3 tr>td:nth-child(1) p")); 
    $("#t3 tr td:nth-child(1)").width(getMaxWidthOf("#t3 tr>td:nth-child(1) p")); 

    //get the second column and assign it the width of the elements in the second column 
    $("#t3 tr th:nth-child(2)").width(getMaxWidthOf("#t3 tr>td:nth-child(2) p")); 
    $("#t3 tr td:nth-child(2)").width(getMaxWidthOf("#t3 tr>td:nth-child(2) p")); 

    //get the fourth column and assign it the width of the elements in the forth column 
    $("#t3 tr th:nth-child(4)").width(getMaxWidthOf("#t3 tr>td:nth-child(4) p")); 
    $("#t3 tr td:nth-child(4)").width(getMaxWidthOf("#t3 tr>td:nth-child(4) p")); 
}); 


function getMaxWidthOf(selector){ 
    var maxWidth = 0; 
    //go through each paragraph in the right column and find the widest value. 
    $(selector).each(function() { 
     if(maxWidth < $(this).width()){ 
      maxWidth = $(this).width(); 
     } 
    }); 
    // assign max width to column 
    return maxWidth; 
} 
</script> 

<!-- add this style --> 
<style type="text/css"> 
#t3 table { 
    table-layout:fixed; 
{ 
.innerParagraph { 
    margin:0; 
    display:inline-block; 
} 
</style> 

Answer 3

La soluzione che ho trovato è per lo stile le vostre cellule come segue:

td{ 
    white-space: nowrap; 
} 

td.description{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 1px;  
    width: 100%; 
} 

La prima parte costringerà ogni colonna di contrarre il più possibile ed ellissize qualsiasi testo ritagliato in qualsiasi cella. Tuttavia, non si contraggono a 1px, perché puoi usare le intestazioni della tabella per fornire una larghezza minima. Impedisce inoltre il ritorno a capo all'interno della tabella.

La seconda parte garantisce che tutto lo spazio libero sia occupato dalla colonna della descrizione, anziché essere distribuito uniformemente tra tutte le colonne.

Infine, se si desidera imporre una larghezza minima effettiva nella colonna della descrizione, posizionare la larghezza minima sull'intestazione della colonna anziché sulle celle della colonna, poiché, a parte la larghezza massima, le celle non possono contrarre per essere più sottile dell'intestazione.

Vedere http://jsfiddle.net/BCZTB/ per un'implementazione.