How to set maximum height for table-cell

Question

I got a table-cell with fixed width and height and if text is too large  cell size should remain the same and text should be hidden by overflow hidden   div      display  table-cell    height  100px     width  100px     overflow  hidden     vertical-align  middle      Table-cell  however  expands beyond 100px if too much text is added  Any tricks to prevent it from expanding   Text should be several lines in length  so  white-space nowrap  solution is not applicable

User · Answer

In css you can t set table-cells max height  and if you white-space nowrap then you can t break it with max width  so the solution is javascript working in all browsers   So  this can work for you   For Limiting max-height of all cells or rows in table with Javascript   This script is good for horizontal overflow tables   This script increase the table width 300px each time  maximum 4000px until rows shrinks to max-height 160px     and you can also edit numbers as your need   var i   0  row  table   document getElementsByTagName  table   0   j   table offsetWidth  while  row   table rows i           while  row offsetHeight  gt  160  amp  amp  j  lt  4000            j    300          table style width   j    px             Source  HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width  Javascript

User · Answer

Might this fit your needs    lt style gt   scrollable     overflow-x  hidden    overflow-y  hidden    height  123px    max-height  123px     lt  style gt    lt table border 0 gt  lt tr gt  lt td gt    A constricted table cell  lt  td gt  lt td align right width 50  gt    By Jarett Lloyd  lt  td gt  lt  tr gt  lt tr gt  lt td colspan 3 width 100  gt     lt hr gt    you CAN restrict the height of a table cell  so long as the contents are lt br gt    encapsulated by a   amp lt div gt   lt br gt    i am unable to get horizontal scroll to work  lt br gt    long lines cause the table to widen  lt br gt    tested only in google chrome due to sheer laziness - JK   lt br gt    most browsers will likely render this as expected lt br gt    i ve tried many different ways  but this seems to be the only nice way  lt br gt  lt br gt   lt  td gt  lt  tr gt  lt tr gt  lt td colspan 3 height 123 width 100  style  border  3px inset blue  color  white  background-color  black   gt     lt div class scrollable style  height  100   width  100    valign top gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt      is this suitable   lt br gt     lt  div gt

User · Answer

By CSS 2 1 rules  the height of a table cell is    the minimum height required by the content     Thus  you need to restrict the height indirectly using inner markup  normally a div element   lt td gt  lt div gt content lt  div gt  lt  td gt    and set height and overflow properties on the the div element  without setting display  table-cell on it  of course  as that would make its height obey CSS 2 1 table cell rules

User · Answer

Try something like this -   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

User · Answer

This is what you want   td      max-height  whatever     max-width  whatever     overflow  hidden

User · Answer

You can do either of the following    Use css attribute  line-height  and set it per table row     this will also vertically center the content within  Set   display  css attribute to  block  and as the following      td      display  block    overflow-y  hidden    max-height  20px        good luck

User · Answer

if you are using display table-cell  max-height will not work for div of this style  so the solution which worked for me is to set the max height of inner div    lt div class  outer div  style  display table  gt        lt div class  inner div  style  display table-cell  gt           lt img src  myimag jpg  alt    style  max-height 300px width auto   gt       lt  div gt       lt div class  inner div  style  display table-cell  gt           lt img src  myimag2 jpg  alt    style  max-height 300px width auto   gt       lt  div gt    lt  div gt

User · Answer

I don t think that the accepted answer actually fully solves the problem  You wanted to have a vertical-align  middle on the table-cells content  But when you add a div inside the table-cell and give it a height the content of that inner DIV will be at the top   Check this jsfiddle  The overflow hidden  works fine  but if you shorten the content so that it s only one line  this line won t be centered vertically  The solution is not to add a DIV inside the table-cell but rather outside  Here s the Code    x000D   x000D     some wrapper    x000D  div d0   x000D      background  grey  x000D      width 200px  x000D      height  200px  x000D    x000D   x000D  div table   x000D      margin  0 auto     just cosmetics    x000D      width  150px  x000D      height  150px  x000D      background   eee  x000D      display  table  x000D    x000D   x000D  div tablecell   x000D      display  table-cell  x000D      vertical-align  middle  x000D      text-align center  x000D      height  100   x000D      width  100   x000D      background   aaa  x000D    x000D   x000D  div outer-div   x000D      height  150px  x000D      overflow  hidden  x000D    x000D   lt div class  d0  gt  x000D       lt div class  outer-div  gt  x000D           lt div class  table  gt  x000D               lt div class  tablecell  gt  x000D                  Lorem ipsum  x000D                   lt  --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 -- gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt   x000D   x000D   x000D

User · Answer

Try      lt td style  word-wrap  break-word  gt Long text here lt  td gt

User · Answer

Use the style below   div     display  fixed    max-height  100px    max-width  100px    overflow  hidden      With the HTML being    lt div gt      your long text here  lt  div gt

[html] How to set maximum height for table-cell?

Examples related to html

Examples related to css