Установка максимальной высоты содержимого ячейки таблицы
У меня есть таблица, которая всегда должна занимать определенный процент от высоты экрана. Большинство строк имеют фиксированную высоту, но у меня есть один ряд, который должен растягиваться, чтобы заполнить доступное пространство. В случае, если содержимое ячейки в этой строке переполняет желаемую высоту, я бы хотел, чтобы содержимое обрезалось с использованием overflow:hidden.
К сожалению, таблицы и строки не учитывают свойство max-height. (Это в спецификации W3C). Когда в ячейке слишком много текста, таблица становится выше, вместо того, чтобы придерживаться указанного процента.
Я могу заставить ячейку таблицы вести себя, если я укажу для нее фиксированную высоту в пикселях, но это противоречит цели ее автоматического растяжения для заполнения доступного пространства.
Я пытался использовать div, но не могу найти магическую формулу. Если я использую div с display:table,:table-row и:table-cell, div действуют как таблица.
Любые подсказки о том, как я могу имитировать свойство максимальной высоты на столе?
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
9 ответов
Мы наконец нашли своего рода ответ. Во-первых, проблема: таблица всегда изменяет размер содержимого, а не заставляет содержимое помещаться в таблицу. Это ограничивает ваши возможности.
Мы сделали это, установив div содержимого для отображения: none, разрешив сам размер таблицы, а затем в javascript установив высоту и ширину содержимого div в соответствии с внутренней высотой и шириной тега td. Показать содержание div. Повторите процесс при изменении размера окна.
Просто поместите метки в div внутри TD и поместите высоту и переполнение.. как показано ниже.
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
У меня была та же проблема с макетом стола, который я создавал. Я использовал решение Джозефа Марикла, но сделал так, чтобы оно работало и для FireFox, и добавил стиль строки таблицы для хорошей меры. Чистое решение CSS, так как использование Javascript для этого кажется совершенно ненужным и излишним.
HTML
<div class='wrapper'>
<div class='table'>
<div class='table-row'>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
<div class='cell-wrap'>
lots of content here
</div>
</div>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
content here
</div>
</div>
</div>
</div>
CSS
.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
Вам нужна обертка вокруг таблицы, если вы хотите, чтобы таблица учитывала процентную высоту, в противном случае вы можете просто установить высоту пикселя для элемента таблицы.
Возможно, не кросс-браузер, но мне удалось получить это: http://jsfiddle.net/QexkH/
в основном это требует фиксированной высоты верхнего и нижнего колонтитула. и это абсолютные позиции таблицы.
table {
width: 50%;
height: 50%;
border-spacing: 0;
position:absolute;
}
td {
border: 1px solid black;
}
#content {
position:absolute;
width:100%;
left:0px;
top:20px;
bottom:20px;
overflow: hidden;
}
Что я нашел!!!, в таблицах CSS td{height:60px;} работает так же, как CSS td{min-height:60px;}
Я знаю ту ситуацию, когда высота клеток выглядит плохо. Это решение javascript не требует скрытого переполнения.
Для ограничения максимальной высоты всех ячеек или строк в таблице с помощью Javascript:
Этот скрипт хорош для горизонтальных таблиц переполнения.
Этот скрипт увеличивает ширину таблицы на 300 пикселей каждый раз (максимум 4000 пикселей), пока строки не уменьшатся до максимальной высоты (160 пикселей), и вы также можете редактировать числа по своему усмотрению.
var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 160 && j < 4000) {
j += 300;
table.style.width = j + 'px';
}
}
Высота ячейки таблицы не может быть ограничена, но вложенный элемент может , как ответили другие в этом вопросе и дубликате. Как установить максимальную высоту для ячейки таблицы?
Однако предыдущие ответы не затрагивают предполагаемый вопрос о том, как высота вложенного элемента может реагировать на заполнение доступного пространства, в то время как высота таблицы остается процентом от экрана.
Согласно описанию вопроса и указанному коду высота таблицы должна составлять 50% области просмотра, а не родительского элемента. Поэтому значение высоты должно быть объявлено с использованием единицы длины области просмотра , например50vhили50vb. (1vhсоставляет 1% от высоты области просмотра.vbявляется логической единицей блока области просмотра.)
table {
height: 50vb;
}
Вложенный контейнер#contentдолжен иметьheight: 100%иoverflow: autoтак, чтобы он заполнил все и только доступное пространство в ячейке таблицы без видимого переполнения. (Изменить: я обнаружил, что Firefox не допускает процентную высоту с переполнением. См. расчет в следующем разделе.)
#content {
height: 100%;
overflow: auto;
}
Однако процентное значение нельзя использовать для высоты содержимого, если необходимо скрыть переполнение. (Может быть, кто-нибудь сможет объяснить, почему.) Значение может вычислять высоту таблицы минус высоту других строк (границы и интервалы в ячейке таблицы также должны быть вычтены.)
#content {
height: calc(50vb - 42px);
overflow: hidden;
}
Этот фрагмент демонстрирует адаптивную таблицу для прокручиваемого и скрытого переполнения.
Другой способ, который может / не может подойти, но, конечно, самый простой:
td {
display: table-caption;
}
Я решил это таким образом:
.tbGDPR td {
border: 1px solid #eee;
border-collapse: collapse;
}
.tbGDPR td div {
max-height: 2em;
overflow: hidden;
}
Я решил только с помощью этого плагина: http://dotdotdot.frebsite.nl/
он автоматически устанавливает максимальную высоту цели и добавляет три точки