1

I have an SQL table that is loaded from database into HTML table. Some of the columns contain many lines of information, right now all the lines in the row are shown, which makes the row too high. I would like to set some maximal height of one row, I have used CSS to set the height but it is not working.

table tbody tr 
{
    max-height: 20px;
}

Can anyone Help? Thank you

blau
  • 55
  • 3
  • 12
  • 1
    It's in the specs, max-height won't work if the content demands more space. For a workaround, you can put the content (content in the td) in a div and set the div's max-height and overflow properties. Please do a little googling next time, we have all kinds of answers on here, just spend a little bit of time asking google and you shall be rewarded – Huangism Aug 23 '18 at 13:12
  • 1
    Possible duplicate of [How to set maximum height for table-cell?](https://stackoverflow.com/questions/13667941/how-to-set-maximum-height-for-table-cell) – Huangism Aug 23 '18 at 13:12
  • The table contains approx 10 000 cells I want to aviod inserting divs in all of them it would be too cmplicated because of already implemented parts of the project. – blau Aug 23 '18 at 13:15
  • I am sure you are not manually editing all those cells, it should an edit in a template and job is done. The point is, what you are trying to do cannot be done because it is meant to behave that way. So you need to change something regardless or live with what you have. It's also not a good idea to show all 10k cells at once, that would slow it up considerably. You might want to do pagination so every time you only show say 50 or 100 – Huangism Aug 23 '18 at 13:19
  • You could do some hacking with the css, setting the `tr` to a different display (like flex for example) but you would have to do some more to make sure everything still shows up the same. – Huangism Aug 23 '18 at 13:23
  • I am not showing all the records at once I have proper pagination, but I also have many functionalities that already are working with a way how the table is structured now, and I wanted to avoid adding the div but it really looks like it is the only way unfortunately. – blau Aug 23 '18 at 13:25
  • Then you might consider hacking the display of table elements. I provided a simple example as an answer to show you what I mean but keep in mind this might cause a lot of work to make table show up correctly – Huangism Aug 23 '18 at 13:29

4 Answers4

1

Try this HTML code

 <table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
 </table>

I hope it's helpful.

  • This shrinks the hole table body into 30px. It maybe is because I have a big table and I am, using horizontal and also vertical scroll. – blau Aug 23 '18 at 13:21
1

You can add a class for the complete table (in the example is variable-rows), this will help to apply the style to the rows of this table only. And will apply the style to all the rows in the table without need to add class for each row:

.variable-rows tr {
  display: flex; 
  height: 30px; 
  overflow-y: scroll;
  border: 1px solid red;
}
<table class="variable-rows">
      <tr>
          <td>cell 1</td>
      </tr>
      <tr>
          <td>cell 2 this is a <br> test text to set <br> the hright of the <br> cell with scroll</td>
      </tr>
      <tr>
          <td>cell 3</td>
      </tr>
</table>
mbadeveloper
  • 1,272
  • 9
  • 16
0

Well another workaround to try is changing the display of the table row or other table elements

Below is a simple example of how that could work but you might need to do a lot of style adjustments due to it

in the example below, I changed the display of the table row to flex

.test {
  display: flex;
  overflow-y: scroll;
  height: 30px;
}

table {
  width: 100%;
}
<table style="border: 1px solid red">
  <thead>
    <tr>
      <td>heading</td>
    </tr>
  </thead>
  <tbody>
    <tr class="test">
      <td><br><br><br><br><br><br><br><br><br>test</td>
      <td>test<br><br><br><br><br><br><br><br></td>
    </tr>

  </tbody>
</table>
Huangism
  • 16,278
  • 7
  • 48
  • 74
0

You can easily set 'height' attribute to your 'tr' tag like:

<tr height="80px" />
Bohdan Skrypnyk
  • 46
  • 3