目录
思考：如果表格第一列的宽度，第一行设置50px，第二行设置100px，不同布局下列一的实际宽度？--必看
举例：
<!--例1 自动表格布局：部分列设宽，且已设置列宽之和不超过列表宽度【必须】-->
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 100px">种类</th>
<th style="width: 200px;word-break: break-all;"
>111111111111111111111111111111111111111111111111111111</th>
<th>重量</th>
</tr>
</table>
<!--例2 固定表格布局：全部列设宽，且已设置列宽之和 = 列表宽度-->
<table cellspacing="0" cellpadding="0" border="0"
style="width: 600px;table-layout: fixed">
<tr>
<th style="width: 100px">种类</th>
<th style="width: 200px">名称</th>
<th style="width: 300px">重量</th>
</tr>
</table>
<!--例3 固定表格布局：全部列设宽，且已设置列宽之和 > 列表宽度；
设置一个可横向滚动的table-->
<div style="width: 600px;overflow-x: auto">
<table cellspacing="0" cellpadding="0" border="0"
style="width: 100%;table-layout: fixed">
<tr>
<th style="width: 100px">种类</th>
<th style="width: 200px">名称</th>
<th style="width: 400px">重量</th>
</tr>
</table>
</div>理论：
- 自动表格布局：table的CSS属性table-layout：auto; （默认值）
列的宽度是由列单元格中没有折行的最宽的内容设定的
- 固定表格布局：table的CSS属性table-layout：fixed;
水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
针对两种表格布局，分别设置列宽来实现宽度设置自由。
1、每列都不设置宽度
<!--自动布局-->
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px">
<!--固定布局-->
<!--<table cellspacing="0" cellpadding="0" border="0"
style="width: 600px;table-layout: fixed">-->
<tr>
<th>种类</th>
<th>名称</th>
<th>重量</th>
</tr>
</table>【图示说明：所有的图例中，上面的表格采用自动布局，下面的表格采用固定布局；每个表格都只有一行。红色字体标明的宽度如100px，是代码中设置的宽度，蓝色字体标明的数字如100，是实际浏览器渲染的宽度】
每列都不设置宽度，自动布局中，列宽根据内容自适应【图1-1,1-2,1-3】；
固定布局中，三列等宽分布【图1-4,1-5,1-6】。
2、只设置第一列的宽度
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 100px">种类</th>
<th>名称</th>
<th>重量</th>
</tr>
</table>表1和表2设置列一宽100px；表3和表4设置列一宽600px
结果：
列表只设置第一列的宽度时，
1）设置的列宽远小于列表宽度时，自动布局中，列一的宽度设置有效，列二、列三根据内容自适应【图2-1,2-2】；固定布局中，列一的宽度设置有效，列二、列三等宽分布【图中2-5,2-6】。
2）设置的列宽 ≥ 列表宽度时，自动布局中，列一的宽度设置失效，列二、列三会尽可能的窄，列一尽可能的宽【图中2-3,2-4】；固定布局中，列一的宽度设置有效，例二和列三会超出整个列表【图2-7,2-8】【避免这种写法】。
3）临界值【如599px】，这里不做讨论
3、设置列一、列二的宽度
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 100px">种类</th>
<th style="width: 200px">名称</th>
<th>重量</th>
</tr>
</table>表1和表2设置列一宽100px，列二宽200px；表3和表4设置列一宽200px，列二宽400px。
结果：
列表设置第一、第二列的宽度时，和只设置第一列的情况类似。但此时比较的是列宽之和。
1）设置的列宽之和小于列表宽度时（小于不准确，但能说明问题），自动布局【图3-1,3-2】和固定布局【图3-5,3-6】，宽度设置有效。
2）设置的列宽之和 ≥ 列表宽度时，自动布局中，宽度设置失效，列三会尽可能的窄，列一和列二基本按照我们的宽度设置，1:2【200 : 400 】分布【图3-3,3-4】；固定布局中，宽度设置有效，列三会超出整个列表【图中3-7,3-8】【避免这种写法】。
4、三列宽度全部设置
4.1三列之和等于列表宽度，宽度设置有效。
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 300px">种类</th>
<th style="width: 200px">名称</th>
<th style="width: 100px">重量</th>
</tr>
</table>分别设置列一宽300px，列二宽200px，列三宽100px。
自动布局【图4-1,4-2】和固定布局【图4-5,4-6】，宽度设置有效。
如果列三的文字是连续的英文字母或数字，浏览器实际渲染效果会奇奇怪怪【图4-3,4-7】。
此时列三加上样式 word-break: break-all; 或 word-break: break-word; 可达到预期【图4-4,4-8】。
4.2 三列之和小于列表宽度，宽度设置失效
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 200px">种类</th>
<th style="width: 200px">名称</th>
<th style="width: 100px">重量</th>
</tr>
</table>分别设置列一200px，列二200px，列三100px，三列之和500px 小于 table宽度600px。
自动布局和固定布局宽度设置均失效，除了内容不能自动折行的图5-3，其余的列表各列基本按照我们的宽度设置，2:2:1【200 : 200 : 100】分布。
4.3 三列之和大于列表宽度
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
<tr>
<th style="width: 100px">种类</th>
<th style="width: 200px">名称</th>
<th style="width: 400px">重量</th>
</tr>
</table>分别设置列一100px，列二200px，列三400px，三列之和700px 大于 table宽度600px。
自动布局中，宽度设置失效。如果文字是纯中文、纯英文、中英文混合，浏览器最终渲染的宽度是有差异的【图6-1,6-2,6-3】，各列大体按照我们的宽度设置，1:2:4分布。
固定布局中，宽度设置有效。但列表的实际宽度会大于我们设置的600px【图6-4,6-5,6-6】。
此时，如果我们给table套一个div，div加样式style="width: 100%;overflow-x: auto"，就可以轻松实现横向滚动的table【图6-6】。
5、结论
自动表格布局下，设置了table宽度后，table的实际宽度一般不会改变（即我们设置的宽度）【如果某列的文字是连续的英文或数字，且未折行宽度大于列表宽度，列表的实际宽度仍会改变】。
设置不同的列宽不一定有效。有效的情况为：
- 部分列设置了宽度，且设置的列宽之和小于table的宽度【注意临界值】；
- 全部的列设置了宽度，且宽度之和等于table的宽度
固定表格布局下，设置了table宽度后，table的实际宽度会改变。
设置不同的列宽基本有效。有效的情况为：
- 部分列设置了宽度【注意避免已设置宽度之和≥table宽度的情况，此时文本超出，挤在一起】
- 全部的列设置了宽度，且宽度之和等于table的宽度
- 全部的列设置了宽度，且宽度之和大于table的宽度（可设置列表横向滚动）
思考：如果表格第一列的宽度，第一行设置50px，第二行设置100px，不同布局下列一的实际宽度？--必看
自动布局下，浏览器最终以设置当前列的最大宽度渲染。图7-1中，第一行第一列不设置宽度，第二行第一列设宽为100px，第三行第一列设宽为60px，浏览器最终以最大的100px渲染。图7-2中，第一行第一列设宽为50px，第二行第一列设宽为100px，第三行第一列设宽为60px，浏览器最终以最大的100px渲染。
固定布局下，浏览器最终以第一行设置的宽度渲染，之后的行设置的宽度失效。图7-3中，第一行三列都未设置宽度，因此三列等分布局。图7-4中，浏览器实际以第一行第一列的列宽50px渲染。
The End