如何获得表格宽度以保留在其容器中？

Question

How do I get a table width to stay within its container?

.outerSection:nth-child(4) .innerSection:nth-child(1) .sectionData:nth-child(1) table{ 
    margin:15px 15px 20px 15px;     
    width:100%;     
    max-width:100%; 
}  

Answer 1

This may have some compatibility issues with some older browsers ( http://caniuse.com/#feat=calc ), but you could try:

width: calc(100% - 30px)  /*to subtract the 15px on each side*/

Alternatively, instead of having that margin you could add padding to its parent container (the .sectionData:nth-child(1) class, or wrap the table in it's own div with padding). I believe there are a few ways to accomplish what you're looking for.

EDIT: Here is a fiddle with the 'calc' CSS: http://jsfiddle.net/7h8cgsjh/1/

Answer 2

The table will not overflow the container UNLESS:

1. The table has position:absolute;
2. The table has a width greater then 100%
3. The table has a greater pixel width then the container does
4. The table uses margin-left or margin-right
5. The table has a padding, which then you could do width: auto

Those are the only simple ways a table could overflow a table. If it is overflowing anyhow, and one of the above 3 conditions are not met, please post your container and table CSS.

A possible to solution to fix yous would be setting the width to auto, or setting the width to 100% and making a 0px margin.