CODEWITHSUNDEEP
jquerycsshtml-table
blau
blau

Reputation: 55

Setting maximum height of table row

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

Upvotes: 1

Views: 4217

Answers (4)

Bohdan Skrypnyk
Bohdan Skrypnyk

Reputation: 56

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

<tr height="80px" />

Upvotes: 0

user10238849
user10238849

Reputation:

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.

Upvotes: 1

mbadeveloper
mbadeveloper

Reputation: 1270

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>

Upvotes: 1

Huangism
Huangism

Reputation: 16448

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>

Upvotes: 0

Related Questions