How the bootstrap table is perfectly nested in a div (or: how to make the height of the div change dynamically with the height of the table?)

In a recent project, I used the bootstrap3 framework and found it very interesting.

Among them, the table component is easy to use. How to achieve the goal in the title?

 

The answer is: 1. If the table sets the height attribute, then add a little pixel and set it to the height of the outer div, so that they just match;

2. If the table does not have a height attribute, then the height attribute of the external div is not set in css, so that the table can be enlarged by default.

 

Oh right. If you want to look better, you can try adding a style to the outer div:

margin-bottom: 10px;

 This can leave a gap with the bottom of the page, and the structure is more clear and intuitive.