Setting a max height on a table

Question

I am trying to design a page where there are some tables  It seems that styling tables is much more painful than it ought to be   The problem is the following  The tables should have a fixed height and display either white space at the bottom  when there is too little content  or a vertical scrollbar  when there is too much   Add to this that the tables have a header which should not scroll   As far as I know  the thead not scrolling is the default behaviour for tables  And a stretching tfoot could serve well for the purpose of filling with white space  Sadly  it seems that every constraint I can put on the table height is cheerfully ignored  I have tried  table       height  600px      overflow  scroll      I have tried with max-height  I have tried to position the table absolutely and give both the top and bottom coordinates  I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity  I have tried to set the height on the tbody too  Fact is  the table always stays exactly the same height as its content  regardless of my efforts   Of course I could fake a table with a div structure  but it actually is a table  and I fear using divs I may run into an issue where some columns may not be properly aligned      How am I supposed to give a table a height

User · Answer

I had a coworker ask how to do this today, and this is what I came up with. I don't love it but it is a way to do it without js and have headers respected. The main drawback however is you lose some semantics due to not having a true table header anymore.

Basically I wrap a table within a table, and use a div as the scroll container by giving it a max-height. Since I wrap the table in a parent table "colspanning" the fake header rows it appears as if the table respects them, but in reality the child table just has the same number of rows.

One small issue due to the scroll bar taking up space the child table column widths wont match up exactly.

Live Demo

Markup

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>entry1</td>
                            <td>entry1</td>
                        </tr>
                       ........ all your entries
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}

User · Answer

NOTE this answer is now incorrect  I may get back to it at a later time   As others have pointed out  you can t set the height of a table unless you set its display to block  but then you get a scrolling header  So what you re looking for is to set the height and display block on the tbody alone    lt table style  border  1px solid red  gt       lt thead gt           lt tr gt               lt td gt Header stays put  no scrolling lt  td gt           lt  tr gt       lt  thead gt       lt tbody style  display  block  border  1px solid green  height  30px  overflow-y  scroll  gt           lt tr gt               lt td gt cell 1 1 lt  td gt               lt td gt cell 1 2 lt  td gt           lt  tr gt           lt tr gt               lt td gt cell 2 1 lt  td gt               lt td gt cell 2 2 lt  td gt           lt  tr gt           lt tr gt               lt td gt cell 3 1 lt  td gt               lt td gt cell 3 2 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    Here s the fiddle

User · Answer

Use divs with max height and min height around the content that needs to scroll    lt tr gt       lt td gt           lt div gt content lt  div gt       lt  td gt   lt  tr gt   td div      max-height 20px      https   jsfiddle net ethanabrace 4w0ksczr

User · Answer

Seems very similar to this question  From there it seems that this should do the trick   table     display  block     important      height  600px    overflow-y  scroll

User · Answer

Add display block  to the table s css   in other words   tell the table to act like a block element rather than a table    fiddle here

User · Answer

In Tables  For minimum table cells height or rows height use css height  in place of min-height   AND  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

lt table  style  border  1px solid red  gt               lt thead gt                   lt tr gt                       lt td gt Header stays put  no scrolling lt  td gt                   lt  tr gt               lt  thead gt               lt tbody id  tbodyMain  style  display  block  border  1px solid green  height  30px  overflow-y  scroll  gt                   lt tr gt                       lt td gt cell 1 1 lt  td gt                       lt td gt cell 1 2 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt cell 2 1 lt  td gt                       lt td gt cell 2 2 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt cell 3 1 lt  td gt                       lt td gt cell 3 2 lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt     Javascript Section      lt script gt    document  ready function       var maxHeight   Math max apply null     body   map function      return   this  height       get           alert maxHeight       var borderheight  3           Added some pixed into maxheight         If you set border then need to add this  borderheight  to maxheight varialbe        tbodyMain   css  min-height   parseInt maxHeight   borderheight     px                       lt  script gt     please  refer How to set maximum possible height to your Table Body   Fiddle Here

User · Answer

Set display  block  for the table Set position  sticky  top  0  for the header row    lt table style  display  block  height  100px  overflow  auto   gt     lt thead gt       lt tr gt         lt td style  position  sticky  top  0   gt Header stays put lt  td gt         lt td style  position  sticky  top  0   gt Layout aligned lt  td gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt foo1 lt  td gt         lt td gt Header stays put lt  td gt       lt  tr gt       lt tr gt         lt td gt foo2 lt  td gt         lt td gt Header stays put lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    https   jsfiddle net 0zxk18fp   Tested on Chrome  Firefox  Safari  Edge

User · Answer

You can do this by using the following css    scroll-thead      width  100       display  inline-table      scroll-tbody-y       display  block      overflow-y  scroll      table-body      height    fix height here        Following is the HTML    lt table gt    lt thead class  scroll-thead  gt             lt tr gt               lt th gt Key lt  th gt              lt th gt Value lt  th gt             lt  tr gt             lt  thead gt            lt tbody class  scroll-tbody-y table-body  gt             lt tr gt              lt td gt Blah lt  td gt              lt td gt Blah lt  td gt              lt  tr gt    lt  tbody gt   lt  table gt    JSFiddle

[html] Setting a max height on a table

Examples related to html

Examples related to css

Examples related to css-tables