In mijn tabel stel ik de breedte van de eerste cel in een kolom in op 100px
.
Echter, wanneer de tekst in een van de cellen in deze kolom te lang is, wordt de breedte van de kolom meer dan 100px
. Hoe kan ik deze uitbreiding uitschakelen?
Ik heb er een tijdje mee gespeeld omdat ik moeite had het uit te vogelen.
Je moet de celbreedte instellen (of th
of td
werkte, ik stelde beide in) EN de table-layout
op fixed
zetten. Om de een of andere reden lijkt de celbreedte alleen vast te blijven staan als de tabelbreedte ook is ingesteld (ik denk dat dat stom is, maar wat maakt het uit).
Ook is het handig om de overflow
eigenschap op hidden
te zetten om te voorkomen dat er extra tekst uit de tabel komt.
Je moet er ook voor zorgen dat je alle randen en sizing overlaat voor CSS.
Ok dus hier's wat ik heb:
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>
[Hier is het in JSFiddle][1]
Deze kerel had een gelijkaardig probleem: https://stackoverflow.com/q/446624/534056
U moet dit in de overeenkomstige CSS schrijven
table-layout:fixed;