Установка максимальной высоты для содержимого ячейки таблицы

У меня есть таблица, которая всегда должна занимать определенный процент высоты экрана. Большинство строк имеют фиксированную высоту, но у меня есть одна строка, которая должна растягиваться, чтобы заполнить доступное пространство. Если содержимое ячейки в этой строке переполняет желаемую высоту, мне понравится содержимое для клипа с использованием overflow: hidden.

К сожалению, таблицы и строки не учитывают свойство max-height. (Это в спецификации W3C). Когда в ячейке слишком много текста, таблица становится выше, вместо того, чтобы придерживаться указанного процента.

Я могу заставить ячейку таблицы вести себя, если я укажу фиксированную высоту в пикселях для нее, но это побеждает цель автоматического растяжения, чтобы заполнить свободное пространство.

Я пробовал использовать divs, но не могу найти магическую формулу. Если я использую divs с display: table,: table-row и: table-cell, divs действуют так же, как таблица.

Любые подсказки о том, как я могу имитировать свойство max-height на таблице?

<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>

Ответ 1

Наконец-то мы нашли ответ. Во-первых, проблема: таблица всегда имеет размеры вокруг содержимого, а не заставляет контент вписываться в таблицу. Это ограничивает ваши возможности.

Мы сделали это, установив отображение содержимого div: none, позволяя самому размеру таблицы, а затем в javascript устанавливаем высоту и ширину содержимого div на внутреннюю высоту и ширину охватывающего тега td. Показать содержимое div. Повторите процесс при изменении размера окна.

Ответ 2

Просто поместите метки в 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>

Ответ 3

У меня была та же проблема с табличным макетом, который я создавал. Я использовал решение Джозефа Марикла, но сделал его работу и для 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%;}

Вам нужна обертка вокруг таблицы, если вы хотите, чтобы таблица соблюдала процентную высоту, иначе вы можете просто установить высоту пикселя в элементе таблицы.

Ответ 4

Возможно, не перекрестный браузер, но мне удалось получить это: 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;
    }

Ответ 5

Что я нашел!!! В таблицах CSS td{height:60px;} работает так же, как CSS td{min-height:60px;}

Я знаю, что ситуация, когда высота клеток выглядит плохо. Это javascript-решение не нуждается в переполнении.

Для ограничения максимальной высоты всех ячеек или строк в таблице с помощью Javascript:

Этот script хорош для таблиц горизонтального переполнения.

Этот script увеличивает ширину таблицы 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';
    }
}

Источник: Решение HTML Table Максимальное ограничение высоты для строк или ячеек путем увеличения ширины таблицы, Javascript

Ответ 6

Другой способ, который может/не подходит, но, безусловно, самый простой:

td {
    display: table-caption;
}

Ответ 7

Я решил использовать этот плагин: http://dotdotdot.frebsite.nl/

он автоматически устанавливает максимальную высоту цели и добавляет три точки