Bootstrap table inside other table | Fix the height of table

Question

I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?

html:

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Browser:

Check it from inspect element styles. I think there will be some padding-bottom or margin-bottom in side the table box. — Sajitha Liyanage, Apr 01 '17 at 07:33
Look my post pls again. I added screen pictures from browser inspect. — Nurzhan Nogerbek, Apr 01 '17 at 07:45
Check from giving static padding-bottom:-20px !important; to table and tr tags — Sajitha Liyanage, Apr 01 '17 at 07:54

score 1 · Answer 1 · answered Apr 01 '17 at 07:21

1

Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table table-no-margin" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<style>
    .table-no-margin { margin: 0 }
</style>

answered Apr 01 '17 at 07:21

Sang Lu

308
3
10

Unfortunately it didn't work. It still show the space under the table. – Nurzhan Nogerbek Apr 01 '17 at 07:26
Have you added `table-no-margin` class into child table? You can try `.table-no-margin { margin: 0 !important; }` – Sang Lu Apr 01 '17 at 07:29
Yes, I added this style to child table. Didnt work. So sad =( – Nurzhan Nogerbek Apr 01 '17 at 07:31
I think you need to use browser inspect this table element to see what are overriding the `margin: 0 !important` – Sang Lu Apr 01 '17 at 07:35
Oh no, you must right click on the child table and choose `Inspect Element`, and then you need select the child table in Inspector to see what really affect to your `margin: 0;` – Sang Lu Apr 01 '17 at 07:51
I did what you described. The same result. – Nurzhan Nogerbek Apr 01 '17 at 08:02
Can you show the full source of this page, it must be something are overriding your `margin: 0;` CSS – Sang Lu Apr 01 '17 at 08:05
This is actually the best answer i found that can work on my situation. Thanks! – plasma Jun 08 '18 at 19:53

score 1 · Answer 2 · answered Apr 01 '17 at 09:08

1

This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.

Working example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%; margin-bottom:0px;">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

answered Apr 01 '17 at 09:08

neophyte

6,540
2
28
43

I tried this before but it didnt work for me. For thats why I asked this question in stackoverflow. – Nurzhan Nogerbek Apr 01 '17 at 11:18
There can be no other reason for this to happen..I think your custom css is not overriding the bootstrap css. Try adding an id to the table then style it. add your custom css after the bootstrap css. if none of them works try adding !important, although that is not recommended. – neophyte Apr 01 '17 at 11:29
In the end of my post you can see the screens from browser and they shows that margin style of table is not overriding. Here parent is td element and child is table. So I need to give the same height to child element as in parent. – Nurzhan Nogerbek Apr 01 '17 at 11:37
Post your full html – neophyte Apr 01 '17 at 12:13

score 0 · Answer 3 · edited May 23 '17 at 12:25

This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.

In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...

Demo on Codeply

       <td>REVERT</td>
       <td style="padding:0;height: 100%;">
           <table class="table" style="height: 100%">
                <tbody>
                     <tr>
                        <td>Name</td>
                        <td>LONG TEXT</td>
                     </tr>
                </tbody>
           </table>
       </td>

Bootstrap table inside other table | Fix the height of table

3 Answers3