Я немного поиграл с этим, потому что мне было трудно его понять.
Вам необходимо установить ширину ячейки (либо th
, либо td
сработало, я установил оба) И установить table-layout
на fixed
.По некоторым причинам ширина ячейки, кажется, остается неизменной, только если ширина таблицы тоже установлена (я думаю, что это глупо, но все же).
Кроме того, полезно установить для свойства overflow
значение hidden
, чтобы предотвратить появление дополнительного текста из таблицы.
Необходимо обязательно оставить все окаймляющие границы.и размеры для CSS тоже.
Хорошо, вот что у меня есть:
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>
Вот оно в JSFiddle
У этого парня была похожая проблема: Ширина ячейки таблицы - исправлениеширина, обтекание / усечение длинных слов