Question

如何让表格宽度保持在其容器内？

.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

这可能与某些较旧的浏览器（http://caniuse.com/#feat=calc）存在一些兼容性问题，但您可以尝试：

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

或者，您可以将填充添加到其父容器（.sectionData：nth-child（1）类，或者使用填充将表包装在其自己的div中），而不是具有该边距。我相信有几种方法可以实现您正在寻找的东西。

编辑：这是一个小提琴＆＃39; calc＆＃39; CSS：http://jsfiddle.net/7h8cgsjh/1/

Answer 2

表格不会溢出容器，除非：

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

这些是表可以溢出表的唯一简单方法。如果它无论如何都满溢，并且不满足上述3个条件之一，请发布您的容器和表格CSS。

可能解决方法是将宽度设置为自动，或将宽度设置为100％并设置0px边距。

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

2 个答案: