Tablomda bir sütundaki ilk hücrenin genişliğini 100px
olarak ayarladım.
Ancak bu sütundaki hücrelerden birindeki metin çok uzun olduğunda sütunun genişliği 100px
ten fazla oluyor. Bu genişlemeyi nasıl devre dışı bırakabilirim?
Biraz oynadım çünkü çözmekte zorlandım.
Hücre genişliğini ayarlamanız (ya th
ya da td
çalıştı, ben ikisini de ayarladım) VE table-layout
u fixed
olarak ayarlamanız gerekir. Bazı nedenlerden dolayı, hücre genişliği yalnızca tablo genişliği de ayarlanmışsa sabit kalıyor gibi görünüyor (bence bu aptalca ama neyse).
Ayrıca, tablodan fazladan metin çıkmasını önlemek için overflow
özelliğini hidden
olarak ayarlamakta fayda vardır.
CSS için de tüm kenarlık ve boyutlandırmaları bıraktığınızdan emin olmalısınız.
Tamam, işte elimdekiler:
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>
[İşte JSFiddle'da][1]
Bu adamın da benzer bir sorunu vardı: https://stackoverflow.com/q/446624/534056
Bunu ilgili CSS'in içine yazmanız gerekir
table-layout:fixed;