Impostare la larghezza costante colonna della tabella, indipendentemente dalla quantità di testo nelle sue cellule?
-
10-10-2019 - |
Domanda
Nel mio tavolo ho impostato la larghezza della prima cella in una colonna per essere 100px
.
Tuttavia, quando il testo in una delle celle in questa colonna è troppo lungo, la larghezza della colonna diventa più di 100px
. Come avrei potuto disattivare questa espansione?
Soluzione
I giocato con lui per un po 'perché ho avuto difficoltà a capire che fuori.
È necessario impostare la larghezza della cella (o th
o td
lavorato, ho impostato entrambi) e impostare il table-layout
a fixed
. Per qualche ragione, la cellula di larghezza sembra rimanere fisso solo se la tabella larghezza è impostata, anche (credo che sia sciocco, ma whatev).
Inoltre, è utile per impostare la proprietà overflow
per hidden
per evitare qualsiasi testo in più da che esce dal tavolo.
Si dovrebbe fare in modo di lasciare tutto il confine e dimensionamento per i CSS, anche.
Ok quindi ecco quello che ho:
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
Questo ragazzo ha avuto un problema simile: larghezza cella di una tabella - fissare larghezza, avvolgimento / troncare le parole lunghe
Altri suggerimenti
Vedere: http://www.html5-tutorials.org/tables/changing-column- larghezza /
Dopo il tag table, utilizzare l'elemento col. non hai bisogno di un tag di chiusura.
Ad esempio, se si aveva tre colonne:
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
Basta aggiungere tag <div>
all'interno <td>
o <th>
definire larghezza <div>
all'interno.
Questo vi aiuterà. Nient'altro funziona.
ad es.
<td><div style="width: 50px" >...............</div></td>
Se avete bisogno di una o più colonne di larghezza fissa, mentre altre colonne devono ridimensionare, provare a impostare sia min-width
e max-width
allo stesso valore.
Hai bisogno di scrivere questo all'interno il corrispondente CSS
table-layout:fixed;
Quello che faccio è:
-
Imposta la larghezza td:
<td width="200" height="50"><!--blaBlaBla Contents here--></td>
-
Impostare la larghezza td con i CSS:
<td style="width:200px; height:50px;">
-
Impostare la larghezza di nuovo come max e min con i CSS:
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
Sembra po 'ripetitivo, ma mi dà il risultato desiderato. Per raggiungere questo obiettivo con molta facilità, potrebbe essere necessario inserire i valori CSS in una classe nel foglio di stile:
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
quindi:
<td class="td_size">
Posizionare l'attributo di classe a qualsiasi <td>
che si desidera.
ho usato questo
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
Inoltre aiuta, per mettere l'ultimo "cellule filler", con width: auto . Questo occuperà spazio rimanente, e lascerà tutte le altre dimensioni come specificato.
Se non si desidera un layout fisso, specificare una classe per la colonna di essere formato in modo appropriato.
CSS:
.special_column { width: 120px; }
HTML:
<td class="special_column">...</td>
Kasun ha l'idea giusta. Ecco il codice corretto ...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Fare rispondono risposta accettata per piccoli schermi, quando più piccole rispetto alla larghezza fissa.
HTML:
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
JS Fiddle
Come per la mia risposta qui , è anche possibile utilizzare un head tabella (che può essere vuoto) e applicare larghezze relative per ogni cella testa tavolo. Le larghezze di tutte le celle del corpo della tabella si conformeranno alla larghezza della testa della colonna. Esempio:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
In alternativa, l'uso colgroup
come suggerito nella risposta di Hyathin.
L'impostazione di questo:
style="min-width:100px;"
ha lavorato per me.
Ho trovato la risposta di Kasun funziona meglio utilizzando vw al posto di px in questo modo:
<td><div style="width: 10vw" >...............</div></td>
Questo è stato l'unico styling avevo bisogno di regolare la larghezza della colonna
Non c'è bisogno di "fixed"
set -. Tutto ciò che serve è l'impostazione overflow:hidden
dal momento che la colonna di larghezza è impostato