DIVCSS: DIV溢出导致DIV中的表格列宽width无效?

考虑以下HTML:两个<div>,都限制了宽度,各自有一个 <table>

<div style="width: 20em; overflow: auto; padding: 2em 0px;">
<table style="border: 1px solid gray; border-collapse: collapse;"><tbody><tr>
	<td style="width: 8em; border: 1px solid;">8em</td>
	<td>1234567890987654321abcdefghijklmnopqrstuvwxyz</td>
</tr></tbody></table>
</div>

<div style="width: 20em; overflow: auto; padding: 2em 0px;">
<table style="border: 1px solid gray; border-collapse: collapse;"><tbody><tr>
	<td style="width: 8em;border: 1px solid;">8em</td>
	<td>1234567890</td>
</tr></tbody></table>
</div>

两个 table 中都明确设定了第1列的宽度,不同的是,第1个表格因为第2列内容过宽,从而导致父div溢出。
显示如下,问题出现了:为什么父div溢出之后,同样宽度的第1列的宽度在第1个table中为什么无效了?

8em 1234567890987654321abcdefghijklmnopqrstuvwxyz
8em 1234567890

具体原因尚不清楚,但我马上就想到一个办法,限制最小宽度:

第1列td {
	width: 8em;
	min-width: 8em;
}

这样确实生效了,但现目前依然不明白是为何。

发表于:2015年04月12日 ,阅读量:634 ,标签:CSS

版权声明:若非特别注明,本站所有文章均为作者原创,转载请务必注明原文地址。