CSS - TBody and TR with different measures

Navigation
0

How do I make my TBody 100% high and my TR have n pixel size? it happens that when I have only one line, the line gets 100%, corresponding to TBody, and I would like it to be fine! Did you understand?

    
asked by anonymous 31.05.2017 / 15:39

2 answers

0

I believe you need to work with the position property of the elements. For example, considering that the table will be within a% of 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 the space of div , simply add div together with position: absolute and width: 100% . See: 

.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>

Notice that the table filled the entire space, but height: 100% and tbody followed it. Doing something similar with tr : 

.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 you also set tbody with tbody and dimensions in position: absolute and width , the body of the table starts to fill the entire space of height , but the lines defined by div remain the default size.

    
31.05.2017 / 16:10
-1

In your element: <tr> , add style: 

line-height: 4px;

npx, actually set the size you want.

You can also change the padding and margin of the tr. And if you're using some ready style, type: bootstrap, you're going to have to take a look at all styles, inclusive.

    
31.05.2017 / 15:58
Redirect in javascript does not work with external script How to center menu [duplicate]