Come nascondere l'overflow della riga tabella?

Ho alcune tabelle html in cui i dati testuali sono troppo grandi per adattarsi. Quindi, espande la cella verticalmente per adattarsi a questo. Quindi ora le righe con overflow sono due volte più alte delle righe con quantità di dati minori. Questo è inaccettabile. Come posso forzare la tabella ad avere la stessa altezza di riga di 1em?Come nascondere l'overflow della riga tabella?

Ecco alcuni markup che riproducono il problema. La tabella dovrebbe essere solo l'altezza di una riga, con il testo traboccante nascosto.

<!DOCTYPE html> 

<html> 
    <head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     table { width:250px; } 
     table tr { height:1em; overflow:hidden; } 
    </style> 
    </head> 
    <body> 
    <table border="1"> 
     <tr> 
     <td>This is a test.</td> 
     <td>Do you see what I mean?</td> 
     <td>I hate this overflow.</td> 
     </tr> 
    </table> 
    </body> 
</html>

fonte

2009-10-12 Josh Stodola

Qualche ragione particolare per cui stai usando un '

' piuttosto che farlo con divs/spans + CSS? Il secondo metodo è più difficile da ottenere ma offre una maggiore flessibilità. Non sono sicuro che sia possibile fare ciò che vuoi usando un normale tavolo. –

+68

Sto usando una 'table' perché sto visualizzando i dati tabulari! –

risposta

necessario specificare due attributi, table-layout:fixed su table e white-space:nowrap; sulle cellule. È inoltre necessario spostare il overflow:hidden; alle cellule troppo

table { width:250px;table-layout:fixed; } 
table tr { height:1em; } 
td { overflow:hidden;white-space:nowrap; }

Here's a Demo. Testato in Firefox 3.5.3 e IE 7

fonte

2009-10-12 14:58:49

Unico aspetto negativo (sembra), è che le larghezze della cella della tabella sono identiche. Un modo per aggirare questo? –

Non per quanto ne so - credo che sulla parte browser sia stata fatta un'ipotesi che, dal momento che non sono definite singole celle, la larghezza del tavolo viene divisa in modo uniforme tra il numero di celle. L'unico modo possibile per aggirare ciò che posso pensare sarebbe quello di calcolare una larghezza per ogni cella in base al numero di caratteri che ciascuno contiene (rispetto al numero totale di caratteri per tutte le celle), server o lato client (il primo probabilmente è la scelta più performante). Questo suona eccessivo? –

dei caratteri totali in tutte le celle della riga in questione è ciò che intendevo nel mio ultimo commento :) –

unico inconveniente (sembra), è che le larghezze cella di tabella sono identici. Qualsiasi modo per aggirare questo? - Josh Stodola 12 ottobre alle 15:53

Basta definire larghezza della tabella e la larghezza di ciascuna cella della tabella

qualcosa come

table {border-collapse:collapse; table-layout:fixed; width:900px;} 
th {background: yellow; } 
td {overflow:hidden;white-space:nowrap; } 
.cells1{width:300px;} 
.cells2{width:500px;} 
.cells3{width:200px;}

Funziona come un fascino: o)

fonte

2009-11-05 15:12:03 Popara

Ma la larghezza fluttuerà in base alla quantità di dati da visualizzare al suo interno. Non è che sto usando font monospaced qui !! –

In generale, se si utilizza white-space: nowrap; è probabilmente perché si sa quali colonne contengono contenuto che avvolge (o allunga la cella). Per tali colonne, in genere avvolgo il contenuto della cella in un span con uno specifico attributo class e applica uno specifico width.

Esempio:

HTML:

<td><span class="description">My really long description</span></td>

CSS:

span.description { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 150px; 
}

fonte

2011-03-04 16:15:16 user645077

Funziona davvero bene .. – Ben

Grazie, questo è stato molto utile. –

Un approccio migliore dell'impostazione dell'intero tavolo. –

Nella maggior parte dei browser moderni, è ora possibile specificare:

<table> 
<colgroup> 
    <col width="100px" /> 
    <col width="200px" /> 
    <col width="145px" /> 
</colgroup> 
<thead> 
    <tr> 
    <th>My 100px header</th> 
    <th>My 200px header</th> 
    <th>My 145px header</th> 
    </tr> 
</thead> 
<tbody> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
    <td>200px is all you get - anything more hides due to overflow.</td> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
</tbody> 
</table>

Poi, se si applicano gli stili dai posti di cui sopra, come segue:

table { 
    table-layout: fixed; /* This enforces the "col" widths. */ 
} 
table th, table td { 
    overflow: hidden; 
    white-space: nowrap; 
}

Il risultato ti dà troppo pieno ben nascosta in tutto il tavolo. Funziona negli ultimi Chrome, Safari, Firefox e IE. Non ho testato in IE prima di 9 - ma la mia ipotesi è che funzionerà fino a 7, e si potrebbe anche avere la fortuna di vedere 5,5 o 6 supporto. ;)

fonte

2012-06-13 21:15:21

Se javascript è accettato come risposta, ho creato un plugin jQuery per risolvere questo problema (per ulteriori informazioni sul problema, vedere CSS: Truncate table cells, but fit as much as possible).

usare il plugin è sufficiente digitare

$('selector').tableoverflow();

Plugin:https://github.com/marcogrcr/jquery-tableoverflow

completa esempio:http://jsfiddle.net/Cw7TD/3/embedded/result/

fonte

2013-05-13 14:14:36 Marco

Here's qualcosa che ho provato. Fondamentalmente, metto il contenuto "flessibile" (il td che contiene linee troppo lunghe) in un contenitore div alto una riga, con overflow nascosto. Poi lascio che il testo si avvolga nell'invisibile. Si ottengono delle interruzioni a crepacci, però, non solo un taglio netto.

table { 
    width: 100%; 
} 

.hideend { 
    white-space: normal; 
    overflow: hidden; 
    max-height: 1.2em; 
    min-width: 50px; 
} 
.showall { 
    white-space:nowrap; 
} 

<table> 
    <tr> 
     <td><div class="showall">Show all</div></td> 
     <td> 
      <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div> 
     </td> 
     <td> 
      <div class="showall">Show all this too</div> 
     </td> 
    </tr> 
</table>

fonte

2014-02-27 08:52:53

Devo aggiungere che il vantaggio qui è che non ho bisogno di impostare larghezze assolute delle colonne. Il design è fluido. –

Il problema qui è: come fai a sapere a quale cella assegnare quale classe? A meno che non si digiti manualmente ogni pagina di cui avrai mai bisogno, in stile Web 1.0, questa non è una soluzione completa. –

avvolgere il tavolo in una div con class = "contenitore"

div.container { 
    width: 100%; 
    overflow-x: auto; 
}

poi

#table_id tr td { 
    white-space:nowrap; 
}

risultato

fonte

2018-03-03 08:57:13

Come nascondere l'overflow della riga tabella?

risposta

Problemi correlati