it-swarm.com.ru

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

У меня есть таблица, которая всегда должна занимать определенный процент от высоты экрана. Большинство строк имеют фиксированную высоту, но у меня есть один ряд, который должен растягиваться, чтобы заполнить доступное пространство. В случае, если содержимое ячейки в этой строке переполняет желаемую высоту, я бы хотел, чтобы содержимое обрезалось с помощью 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>
38
ccleve

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

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

15
ccleve

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

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

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

3
cellen

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

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

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

1
Mr. Rick

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

td {
    display: table-caption;
}
1
zak

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

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

0
Francesco Borzi