Подтвердить что ты не робот

Как установить максимальную высоту для таблицы?

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

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

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

Текст должен содержать несколько строк, поэтому решение "white-space: nowrap" не применимо

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

Я не думаю, что принятый ответ действительно полностью решает проблему. Вы хотели иметь 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>

Ответ 3

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

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

Ответ 4

В css вы не можете установить максимальную высоту табличных ячеек, и если вы используете white-space nowrap, тогда вы не можете разбить ее с максимальной шириной, поэтому решение - это 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

Ответ 5

Вы можете сделать одно из следующего:

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

  2. Установите атрибут css для display на "block" и выполните следующие действия:

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

удачи!

Ответ 6

Try

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

Ответ 7

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

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

С HTML-кодом:

<div>
    your long text here
</div>

Ответ 8

если вы используете display: table-cell, max-height не будет работать для div этого стиля. поэтому решение, которое сработало для меня, это установить максимальную высоту внутреннего div

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>

Ответ 9

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

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

Ответ 10

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

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