CSS - Tbody and TR with different measurements

Question

How do I make my Tbody to be 100% tall and my TR to have n pixel size? occurs that when I have only one line, the line gets 100%, corresponding to Tbody, and I would like it to be thin! I could understand?

Answer 1

I believe what you need is to work with the property position elements. For example, considering that the table will be within a div 500px x 500px:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  background: #EfEfEf;
}

<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
    </tbody>
  </table>
</div>

For the table to fill in the space of div, just add position: absolute along with width: 100% and height: 100%. Behold:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  background: #EfEfEf;
}

table {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #CC0000;
}

<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
    </tbody>
  </table>
</div>

Note that the table filled all the space, but the tbody and the tr accompanied him. Doing something similar with the tbody:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  
  background: #EfEfEf;
}

table {
  position: absolute;
  width: 100%;
  height: 100%;
  
  background: #CC0000;
}

table tbody {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  background: green;
}

table tbody tr {
  background: blue;
}

<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Vestibulum tortor nunc, lobortis efficitur eleifend nec, tristique dictum erat</td>
      </tr>
    </tbody>
  </table>
</div>

Note that when defining also the tbody with position: absolute and the dimensions in width and height, the body of the table now fills the entire space of the div, but the lines defined by tr remain in standard size.

Answer 2

In his element: <tr>, add style:

line-height: 4px;

npx, actually set the size you want.

You can also change the padding and margin of tr. And if you are using some style ready, like: bootstrap, you will have to take a look at the styles of tds, including.