首页 > 代码库 > 精准控制表格列表(table-layout:fixed)
精准控制表格列表(table-layout:fixed)
现在面临的问题：
对于元素的display的属性使用表格的形式，可以使元素有表格的行为，但对于不固定宽度的的元素，进行布局也会很难控制。这是因为列宽会对表格进行相应的调整，即使指定了相应的宽度，也只是能起到类似的效果。
解决方案：
table-layout的属性。它的默认值是atuo，其行为模式被自动表格布局算法，也是表格布局行为。它还具有另一个值fixed，这个值可以明显可控一些。这个fixed属性成为固定表格布局算法。通过以下例子对比一下：
1.默认表格值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>默认</title> <style> table{ width: 500px; height: 80px; } </style></head><body><table border="1" cellspacing="0" > <tr> <td>如果我们不……</td> <td>指定的单元格的宽度，则这些单元格会根据内容的 宽度的长短来分析表格的宽度。也就是说内容较长的分配的宽度就会多一些</td> </tr> <tr> <td>表格的每一行都会参与到列宽的计算，而且不仅是第一行</td> <td> 这个结果和上面的那个是不一样的 </td> </tr></table></body></html>
2使用table-layout：fixed属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table-layout: fixed</title> <style> table{ width: 500px; height: 80px; table-layout: fixed; } </style></head><body><table border="1" cellspacing="0" > <tr> <td>如果我们不……</td> <td>指定的单元格的宽度，则这些单元格会根据内容的 宽度的长短来分析表格的宽度。也就是说内容较长的分配的宽度就会多一些</td> </tr> <tr> <td>表格的每一行都会参与到列宽的计算，而且不仅是第一行</td> <td> 这个结果和上面的那个是不一样的 </td> </tr></table></body></html>
精准控制表格列表(table-layout:fixed)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。