Я установил ширину этих столбцов в процентах (%)
Без white-space: nowrap;
ширина столбца соответствует настройкам (20%, 20%, 20%, 15%, 15%, 10%)
.cell-component {
width: 90%;
background-color: aqua;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Я хочу скрыть текст, если он переполняется, поэтому мне нужно добавить white-space: nowrap;
Я надеюсь, что при этом будут сохранены как проценты (20%, 20%, 20%, 15%, 15%, 10%), так и скрытый текст при переполнении, но фактическая ширина автоматически устанавливается для этих столбцов.
.cell-component {
width: 90%;
background-color: aqua;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Любые идеи для решения этой проблемы? Пожалуйста, дайте отзыв, если у меня есть что-то неправильное в моем коде. Спасибо.
Чтобы установить ширину столбцов, вы можете использовать colgroup
и установить фиксированную раскладку таблицы. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup
<colgroup>
<col style = "width:20%">
<col style = "width:20%">
<col style = "width:20%">
<col style = "width:15%">
<col style = "width:15%">
<col style = "width:10%">
</colgroup>
* {
padding: 0;
margin: 0;
}
table {
width: 100%;
table-layout: fixed; // set table layout
}
.cell-component {
background-color: aqua;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
column-width: auto;
}
<table border = "1">
<colgroup>
<col style = "width:20%">
<col style = "width:20%">
<col style = "width:20%">
<col style = "width:15%">
<col style = "width:15%">
<col style = "width:10%">
</colgroup>
<tr>
<td>Col 1</td>
<td class = "">Col 2</td>
<td class = "">Col 3</td>
<td class = "">Col 4</td>
<td class = "">Col 5</td>
<td class = "">Col 6</td>
</tr>
<tr>
<td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
<td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
<td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
<td class = "cell-component col-15">lorem ipsum lorem ipsum</td>
<td class = "cell-component col-15">lorem ipsum lorem ipsum</td>
<td class = "cell-component col-10">lorem ipsum lorem ipsum</td>
</tr>
</table>
max-width: 90%
?