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

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

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

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

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

По правилам CSS 2.1 высота ячейки таблицы является «минимальной высотой, требуемой контентом». Таким образом, вам необходимо ограничить высоту опосредованно, используя внутреннюю разметку, обычно элемент div (

content

), а также задайте свойства height и overflow элемента div (без настройки display: table-cell на нем, конечно же, поскольку это приведет к тому, что его высота будет соответствовать правилам таблицы таблиц CSS 2.1).

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

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

  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; } направо  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; } 

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

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

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

  2. Установите атрибут «display» css на «block» и в качестве следующего:

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

удачи!

Пытаться

  Long text here 

Используйте следующий стиль:

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

С HTML:

 
your long text here

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

  
A constricted table cell By Jarett Lloyd

you CAN restrict the height of a table cell, so long as the contents are
encapsulated by a `<div>`
i am unable to get horizontal scroll to work.
long lines cause the table to widen.
tested only in google chrome due to sheer laziness - JK!!
most browsers will likely render this as expected
i've tried many different ways, but this seems to be the only nice way.

is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??
is this suitable??

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

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