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

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

41 голосов
/ 12 августа 2011

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

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

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

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

Любые подсказки о том, как я могу имитировать свойство 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>

Ответы [ 7 ]

49 голосов
/ 04 августа 2012

Просто поместите метки в 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>
15 голосов
/ 15 августа 2011

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

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

3 голосов
/ 16 июня 2016

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

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

2 голосов
/ 13 августа 2011

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

Что я нашел !!!, В таблицах 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';
    }
}

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

0 голосов
/ 25 марта 2017

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

td {
    display: table-caption;
}
0 голосов
/ 25 февраля 2016

Я решил только с помощью этого плагина: http://dotdotdot.frebsite.nl/

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...