今天遇到了一个问题，<table>标签设置了width:100%但是实际内容宽度超出了外部容器。
简要结构如下:
<div>
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
</tbody>
</table>
</div>
于是查了资料，产生这种情况的原因可能是表格内容的宽度过长导致整个表格宽度超出容器。
解决办法：
- 找到导致内容过长的部分进行修改。
- 设置table-layout属性。 官方文档：developer.mozilla.org/en-US/docs/…
table-layout有两个值：auto | fixed
- auto: 默认值。表格及其单元格的宽度会根据内容自动调整大小。
- fixed: 表格和列的宽度是由 table 和 col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的宽度。
设置table-layout: fixed;之后，表格内容宽度就不会影响整个表格的宽度。
但是注意，他是根据第一行单元格的宽度来设置的。
像上面这种结构，
设置了table-layout: fixed;之后，下面tbody标签内的td宽度是受thead中的th宽度影响的，因此实际使用时要注意调整。
像上面这种第一行只有一个th，第二行有两个td的情况，若设置table的table-layout:fixed;，则下面的两个td的第一个td宽度会和th宽度相等，第二个td宽度则会占据剩余空间。
可以自行尝试：
