Ho una cella di tabella che vorrei sempre avere una larghezza particolare. Tuttavia, non funziona con grandi stringhe di testo non spaziato. Ecco un caso di prova:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>Come faccio a ritagliare il testo sul bordo del riquadro, anziché espanderlo?
Risposte:
Ecco lo stesso problema .
È necessario impostare table-layout:fixed e una larghezza adeguata sull'elemento della tabella, nonché overflow:hiddene white-space: nowrapsulle celle della tabella.
La larghezza della tabella deve essere uguale (o inferiore) alle celle a larghezza fissa.
Con una colonna a larghezza fissa:
Con più colonne a larghezza fissa:
È necessario impostare una larghezza per la tabella , ma qualsiasi larghezza aggiuntiva viene semplicemente presa dalle celle del fluido.
Con più colonne, larghezza fissa e larghezza del fluido:
È così che vanno le TD. Credo che potrebbe essere perché la proprietà 'display' dell'elemento TD è intrinsecamente impostata su 'table-cell' piuttosto che 'block'.
Nel tuo caso, l'alternativa potrebbe essere quella di avvolgere il contenuto del TD in un DIV e applicare larghezza e overflow al DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>Potrebbero esserci dei problemi di padding o cellpadding da affrontare, e faresti meglio a rimuovere gli stili inline e usare invece i CSS esterni, ma questo dovrebbe essere un inizio.
Applicare CSS table-layout:fixed;(e talvolta width:<any px or %>) alla TABELLA e white-space: nowrap; overflow: hidden;stile su TD. Quindi imposta le larghezze CSS sugli elementi cella o colonna corretti .
Significativamente, le larghezze delle colonne della tabella a layout fisso sono determinate dalle larghezze delle celle nella prima riga della tabella. Se ci sono elementi TH nella prima riga e le larghezze sono applicate a TD (e non a TH), allora la larghezza si applica solo al contenuto del TD (gli spazi bianchi e l'overflow possono essere ignorati); le colonne della tabella verranno distribuite uniformemente indipendentemente dalla larghezza TD impostata (poiché non vi sono larghezze specificate [su TH nella prima riga]) e le colonne avranno [calcolate] larghezze uguali; la tabella non ricalcola la larghezza della colonna in base alla larghezza del TD nelle righe successive. Imposta la larghezza sui primi elementi di cella che la tabella incontrerà.
In alternativa, e il modo più sicuro per impostare le larghezze di colonna è utilizzare <COLGROUP>e <COL>tag nella tabella con la larghezza CSS impostata su ogni larghezza fissa COL. I CSS relativi alla larghezza delle celle sono più belli quando la tabella conosce in anticipo le larghezze delle colonne.
Bene, ecco una soluzione per te, ma non capisco davvero perché funzioni:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>Vale a dire, avvolgendo il contenuto della cella in un div.
overflow:hiddenpuò essere rimosso da tde la larghezza del divpuò essere impostata al 100% in modo che funzioni con qualsiasi tdlarghezza (compresi quelli auto-dimensionati!)
La soluzione migliore è inserire un div nella cella della tabella con larghezza zero. Le celle della tabella del corpo erediteranno le loro larghezze dalle larghezze definite dalla testa. Posizione: il margine relativo e negativo dovrebbe fare il trucco!
Ecco uno screenshot: https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>Dovrai impostare gli attributi di stile della tabella: widthe table-layout: fixed;lasciare che 'overflow: hidden;' l'attributo funziona correttamente.
Se funziona meglio quindi usando div con l' widthattributo style, specialmente quando lo si usa per i calcoli di ridimensionamento dinamico, la tabella avrà un DOM più semplice che rende più facile la manipolazione perché non sono necessarie correzioni per il riempimento e il margine
Come extra, non è necessario impostare la larghezza per tutte le celle ma solo per le celle nella prima riga.
Come questo:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>Ho appena avuto un problema simile e all'inizio ho dovuto usare l' <div>interno <td>(la soluzione di John MacIntyre non ha funzionato per me per vari motivi).
Nota che <td><div>...</div></td>non è un posizionamento valido per un div, quindi sto usando un <span>con display:block;set. Si convalida bene ora e funziona.
per rendere più semplice propongo di inserire una textarea all'interno della td che gestisce automaticamente l'overflow
<td><textarea autofocus>$post_title</textarea></td>
bisogno di essere migliorato
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>visualizza 123456
vertical-align:middlee anche l'aggiunta al DIV non risolve il problema.