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

У меня есть таблица-ячейки с фиксированной шириной и высотой и, если текст слишком большой, размер ячейки должен оставаться прежним, а текст должен быть скрыт от переполнения:скрытый.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

таблица-ячейка, однако, расширяется за пределы 100px, если добавляется слишком много текста. Любые трюки, чтобы предотвратить его расширение?

текст должен быть длиной в несколько строк, поэтому решение "пробел: nowrap" неприменимо

9 59
html css css3

9 ответов:

By правила CSS 2.1, высота ячейки таблицы - это "минимальная высота, требуемая содержимым". Таким образом, вам нужно ограничить высоту косвенно, используя внутреннюю разметку, обычно a div элемент (<td><div>content</div></td>), и set height и overflow свойства на the div элемент (без указания display: table-cell на нем, конечно, как это сделало бы его высоту подчиняться правилам CSS 2.1 table cell).

120

Я не думаю, что принятый ответ на самом деле полностью решает проблему. Вы хотели иметь vertical-align: middle на таблице-содержимое ячеек. Но когда вы добавляете div внутри ячейки таблицы и даете ей высоту, содержимое этого внутреннего DIV будет вверху. Проверьте это jsfiddle. Переполнение: скрыто; работает нормально, но если вы сократите содержимое так, что это только одна строка, эта строка не будет центрироваться вертикально

решение состоит не в том, чтобы добавить DIV внутри стола-клетка, а скорее снаружи. Вот это код:

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}
<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div>
7

попробуйте что-то вроде этого:-

 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

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

Так, это может работать для вас.

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

этот скрипт хорош для горизонтальных таблиц переполнения.

этот скрипт увеличивает ширину таблицы 300px каждый раз, максимум 4000px до строк сжимается до максимальной высоты (160px), и вы также можете редактировать номера по мере необходимости.

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

1

вы можете выполнить одно из следующих действий:

  1. используйте атрибут css "line-height" и установите его на строку таблицы (), это также будет вертикально центрировать содержимое в пределах

  2. установите атрибут css" display " в "block" И следующим образом:

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}

удачи!

1

попробовать

   <td style="word-wrap: break-word">Long text here</td>
0

используйте стиль ниже:

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

С HTML быть:

<div>
    your long text here
</div>
0

может ли это соответствовать вашим потребностям?

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

-1

Это то, что вы хотите:

td {
   max-height: whatever;
   max-width: whatever;
   overflow: hidden;
}
-2