Come limitare una cella di tabella a una riga di testo usando i CSS?

Ho una tabella di utenti in cui ogni riga contiene i loro nomi, indirizzo e-mail e così via. Per alcuni utenti questa riga è alta una riga di testo, per altri due, ecc. Ma mi piacerebbe che ogni riga del tavolo fosse alta una riga di testo, troncando il resto.Come limitare una cella di tabella a una riga di testo usando i CSS?

ho visto queste due domande:

In realtà la mia domanda è esattamente simile al primo, ma dal momento che il collegamento è morto non posso studiare esso. Entrambe le risposte dicono di usare white-space: nowrap. Tuttavia questo non funziona, forse mi manca qualcosa.

Dal momento che non posso mostrare il codice, ho riprodotto il problema:

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div>

Senza white-space il tavolo è 500px di larghezza, e il testo prende più di una riga.

Ma white-space: nowrap fa sì che il browser ignori semplicemente la direttiva width e aumenti la larghezza della tabella finché tutti i dati non si adattano a una riga.

Cosa sto sbagliando?

fonte

2010-07-31 Tomaka17

Non in questo esempio, ma sul mio vero sito web sì. Ad ogni modo, non credo che il doctype non sia legato a questo problema. – Tomaka17

l'overflow funzionerà solo se sa da dove iniziare considerando che è stato sorvolato. È necessario impostare l'attributo larghezza e l'altezza del <td>

prendere 2

Prova ad aggiungere table-layout: fixed; width:500px; allo stile del tavolo.

UPDATE 3

confermato questo ha funzionato: http://jsfiddle.net/e3Eqn/

fonte

2010-07-31 18:01:46

L'avevo già provato prima di fare la domanda e non funziona neanche.Ho modificato la domanda per aggiungerla – Tomaka17

@ Tomaka17, ho modificato la mia risposta per includere istruzioni aggiuntive. –

C'è un modo per dire semplicemente "l'overflow è la dimensione dell'elemento se questo elemento non fosse incluso"? – Claudiu

Aggiungere il seguente al vostro foglio di stile:

table{ 
    width: 500px; table-layout:fixed; 
}

È necessario aggiungere la larghezza della tabella per assicurare che la proprietà successiva si adatta gli elementi alla dimensione specificata. La proprietà layout di tabella qui costringe il browser a utilizzare un layout fisso all'interno dei 500 pixel forniti.

fonte

2010-07-31 18:42:27 cm2

Grazie, ti do +1 Tuttavia segna la risposta di Mike Sherov come accettata da quando ho appreso l'esistenza di overflow di testo grazie a lui – Tomaka17

+1. Era abbastanza vicino. –

Aggiungere il seguente al vostro foglio di stile:

table { white-space: nowrap; }

fonte

2013-08-06 09:19:20 Googuez

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

semplice e utile. usa sopra il codice per

fonte

2015-05-14 08:34:39 user2782717

Come limitare una cella di tabella a una riga di testo usando i CSS?

risposta

Problemi correlati