1

I have a table with rows that need to be constant height. (Also width--but table-layout:fixed seems to solve this.) The <tr>s have <div>s inside them, and they need to occupy 100% of the height of their cells. If the contents of the <div> goes over, there needs to be a scrollbar. If it goes under, it still needs to occupy the full row.

Here's some minimal code:

<table border="1" width="200" style="table-layout:fixed;"><tbody>
    <tr style="height:100px;">
        <td>
            <div style="height:100%; overflow:scroll; background-color:#cdf;">
                abcdefghijklmnopqrstuvwxyzabcdefg<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc
            </div>
        </td>
    </tr>
    <tr style="height:100px;">
        <td>
            <div style="height:100%; overflow:scroll; background-color:#fcc;">
                abc
            </div>
        </td>
    </tr>

But this isn't working in either case: if the contents of the <div> are too long, it grows the cell and doesn't bother to use the scrollbar. If the contents are too short, it doesn't occupy the whole row. Any thoughts on a browser-independent way to establish a <tr> as having a single, hard-set size? Also, please keep in mind that the actual contents of the <div>s are dynamic, and I don't know them ahead of time. Thanks.

Adam Smith
  • 449
  • 9
  • 23

2 Answers2

2

Simply put style="height:100px;" on your <td> tags:

<table border="1" width="200" style="table-layout:fixed;"><tbody>
<tr >
    <td style="height:100px;">
        <div style="height:100%; overflow:scroll; background-color:#cdf;">
            abcdefghijklmnopqrstuvwxyzabcdefg<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc
        </div>
    </td>
</tr>
<tr >
    <td style="height:100px;">
        <div style="height:100%; overflow:scroll; background-color:#fcc;">
            abc
        </div>
    </td>
</tr>
</tbody>
</table>
Farzad Rastgar Sani
  • 371
  • 1
  • 4
  • 12
1

Nothing beyond this is really needed. table-layout: fixed; is required to have fixed table width.

table{
  width: 200px;
  table-layout: fixed;
}

tr:nth-child(1){
  background-color: #cdf;
}
tr:nth-child(2){
  background-color: #fcc;
}
table div{
  max-height: 100px;
  overflow: auto;
}
<table border="1"><tbody>
    <tr>
        <td>
            <div>              abcdefghijklmnopqrstuvwxyzabcdefgasdasdasdasd<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
               abc
            </div>
        </td>
    </tr>
Libra
  • 2,544
  • 1
  • 8
  • 24
  • This gets the small example working, but not the large one for me. (And yes, stylesheets make it prettier. I was trying to make minimal code.) – Adam Smith Jan 28 '20 at 04:47
  • @AdamSmith What do you mean "big example"? – Libra Jan 28 '20 at 04:51
  • There were 2 cells--one with too much text for the box, one with too little. The boxes need to be of constant size. – Adam Smith Jan 28 '20 at 07:30
  • Just change max-height to height... @AdamSmith Sometimes the easiest answer isn’t the best – Libra Jan 28 '20 at 07:57