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

Question

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

.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) class，或者将 table 包装在它自己的 div 有填充）。我相信有几种方法可以满足您的需求。

编辑：这是一个 fiddle 和 'calc' CSS：http://jsfiddle.net/7h8cgsjh/1/

Answer 2

table 不会溢出容器，除非：

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

这些是 table 溢出 table 的唯一简单方法。如果无论如何都溢出了，并且不满足以上3个条件之一，请post您的容器和table CSS.

解决您的问题的可能解决方案是将宽度设置为自动，或将宽度设置为 100% 并设置 0 像素边距。

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

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

html

css

css-tables