Nella mia tabella ho impostato la larghezza della prima cella di una colonna a 100px
;
Tuttavia, quando il testo in una delle celle di questa colonna è troppo lungo, la larghezza della colonna diventa più di 100px
. Come posso disabilitare questa espansione?
Ci ho giocato un po' perché ho avuto problemi a capirlo.
È necessario impostare la larghezza della cella (sia th
che td
hanno funzionato, io li ho impostati entrambi) E impostare il table-layout
su fixed
. Per qualche ragione, la larghezza della cella sembra rimanere fissa solo se anche la larghezza della tabella è impostata (penso che sia stupido, ma vabbè).
Inoltre, è utile impostare la proprietà overflow
a hidden
per evitare che del testo extra esca dalla tabella.
Dovresti assicurarti di lasciare tutti i bordi e il dimensionamento per i CSS, anche.
Ok quindi ecco cosa 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>
[Qui è in JSFiddle][1]
Questo ragazzo ha avuto un problema simile: https://stackoverflow.com/q/446624/534056
Devi scrivere questo all'interno del CSS corrispondente
table-layout:fixed;