Setting max-height for table cell contents

Question

I have a table which should always occupy a certain percentage of the height of the screen  Most of the rows are of fixed height  but I have one row that should stretch to fill the available space  In the event that the contents of a cell in that row overflows the desired height  I ll like the contents to clip using overflow hidden   Unfortunately  tables and rows do not respect the max-height property   This is in the W3C spec   When there is too much text in the cell  the table gets taller  instead of sticking to the specified percentage   I can get the table cell to behave if I specify a fixed height in pixels for it  but that defeats the purpose of having it automatically stretch to fill available space   I ve tried using divs  but can t seem to find the magic formula  If I use divs with display table   table-row  and  table-cell the divs act just like a table   Any clues on how I can simulate a max-height property on a table    lt head gt       lt style gt          table               width  50               height  50               border-spacing  0                    td               border  1px solid black                     headfoot               height  20px                     content               overflow  hidden                 lt  style gt   lt  head gt   lt body gt   lt table gt       lt tr class  headfoot  gt  lt td gt header lt  td gt  lt  tr gt       lt tr gt           lt td gt           lt div id  content  gt              put lots of text here          lt  div gt           lt  td gt           lt tr gt       lt tr class  headfoot  gt  lt td gt footer lt  td gt  lt  tr gt   lt  table gt   lt  body gt

User · Answer

Possibly not cross browser but I managed get this: http://jsfiddle.net/QexkH/

basically it requires a fixed height header and footer. and it absolute positions the table.

    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

We finally found an answer of sorts  First  the problem  the table always sizes itself around the content  rather than forcing the content to fit in the table  That limits your options   We did it by setting the content div to display none  letting the table size itself  and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag  Show the content div  Repeat the process when the window is resized

User · Answer

Just put the labels in a div inside the TD and put the height and overflow   like below    lt table gt   lt tr gt     lt td gt  lt div style  height 40px  overflow hidden  gt Sample lt  div gt  lt  td gt     lt td gt  lt div style  height 40px  overflow hidden  gt Text lt  div gt  lt  td gt     lt td gt  lt div style  height 40px  overflow hidden  gt Here lt  div gt  lt  td gt   lt  tr gt   lt  table gt

User · Answer

I ve solved just using this plugin  http   dotdotdot frebsite nl   it automatically sets a max height to the target and adds three dots

User · Answer

Another way around it that may may not suit but surely the simplest   td       display  table-caption

User · Answer

What I found      In tables CSS td height 60px   works same as CSS td min-height 60px    I know that situation when cells height looks bad   This javascript solution don t need overflow hidden   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

I had the same problem with a table layout I was creating  I used Joseph Marikle s solution but made it work for FireFox as well  and added a table-row style for good measure  Pure CSS solution since using Javascript for this seems completely unnecessary and overkill   html   lt div class  wrapper  gt       lt div class  table  gt           lt div class  table-row  gt               lt div class  table-cell  gt                  content here              lt  div gt               lt div class  table-cell  gt                   lt div class  cell-wrap  gt                      lots of content here                  lt  div gt               lt  div gt               lt div class  table-cell  gt                  content here              lt  div gt               lt div class  table-cell  gt                  content here              lt  div gt           lt  div gt       lt  div gt   lt  div gt    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      You need a wrapper around the table if you want the table to respect a percentage height  otherwise you can just set a pixel height on the table element

[html] Setting max-height for table cell contents

Examples related to html

Examples related to css

Examples related to html-table