строка таблицы расширяется с текстом

88
13

как сделать таблицы строк одинаковой высоты? всякий раз, когда текст в <td> превышает предел, он выводит строку. Как сделать это так, чтобы он этого не делал. вместо этого отображать меньше текста, вот код

<div class="firstDiv" style="width: 200px; height: 200px;">

<table border="1" style="border-collapse: collapse;">
<tr style="height: 20px;">
<th width="33%">First Name</th>
<th width="33%">Last Name</th>
<th width="33%">Country Of Origin OR MIG</th>
</tr>
<tr>
<td>Mark</td>
<td>Hopkins lee brimlow</td>
<td>Not living in world right now</td>
</tr>
</table>
</div>

спросил(а) 2021-01-19T15:31:40+03:00 2 месяца, 3 недели назад
1
Решение
61

Что касается нескольких связанных разделов контента (по отношению к ячейкам таблицы vis-a-vis) и кратким "хорошо продуманным" пользовательским интерфейсом, вы должны иметь хорошо сформированные данные или быть готовыми к компрометации. По вашему вопросу, подразумеваемое предположение заключается в том, что ваши данные не являются хорошо сформированными (в смысле количества текста), и поэтому вы готовы идти на компромисс. Два предложения:


Ключ с обоими этими предложениями состоит в том, что они фиксируют высоту каждого элемента td (и, следовательно, всей строки) на одну текстовую строку через white-space: nowrap.

Конечно, есть и другие варианты согласованной высоты таблицы, но сложно перечислить их всех без более явного вопроса.

ответил(а) 2021-01-19T15:31:40+03:00 2 месяца, 3 недели назад
61

Попробуйте обернуть текст вокруг div

<div class="firstDiv" style="width: 200px; height: 200px;">

<table border="1" style="border-collapse: collapse;">
<tr style="height: 20px;">
<th width="33%"><div>
First Name
</div></th>
<th width="33%"><div>
Last Name
</div></th>
<th width="33%"><div>
Country Of Origin OR MIG
</div></th>
</tr>
<tr>
<td><div>
Mark
</div></td>
<td><div>
Hopkins lee brimlow
</div></td>
<td><div>
Not living in world right now
</div></td>
</tr>
</table>
</div>

И используйте высоту

th div, td div{
height:40px;
overflow:auto;
}

https://jsfiddle.net/L2awyezb/

ответил(а) 2021-01-19T15:31:40+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема