标签：style c class blog code java
今天在应用中设置了一个表格，table是100%展开。
在css中设置了如下代码: 为了防止连续Ascii字符引起的宽度撑开的问题
.table { table-layout: fixed; } .col-title { width: 190px; }
但在实际应用导致了其他问题，问题是这样的
表格的首行是合并行 ，code如下
<table class="table"> <caption>基本信息</caption> <tr> <td class="col-title">名称:</td> <td colspan="3"> <input type="text" name=""> </td> </tr> <tr> <td class="col-title">部门:</td> <td> <select> <option>技术研发部</option> </select> </td> <td class="col-title">登记时间:</td> <td>2012年5月2日</td> </tr> </table>
分析问题，我们知道
1：如果没有对宽度设定明确的单位值，那么表格将根据首行的内容宽度占比来计算单元格的宽度
2：table-layout已经限制了宽度约定，无法通过表格的自我计算重新定位每一个单元格的宽度，所以后面设置的col-title样式的宽度都没有生效
所以在首行合并的情况下，浏览器实际只是计算了两个单元格的各自内容占比。那么其他tr行的元素无论设置何值将无效。最终的结果为
a: 首列会根据首行的首列来对齐
b: 2-n列会根据合并行的宽度来均分宽度 (colspan所在td的width / n)
问题找到了，如何解决了。既要保证table-layout:fixed样式的有效性，又要保持对齐
<colgroup>这个元素应该果断登场了
w3c翻译:
<colgroup>: 标签用于对表格中的列进行组合，以便对其进行格式化。<colgroup的用处在于不需要对各个单元和各行重复应用样式了。
从描述上来看，应该可以解决我们的问题。这里需要结合col元素来定义单元格的宽度
<table class="table table-bordered"> <caption>项目基本信息</caption> <colgroup> <col class="col-title"></col> <col></col> <col class="col-title"></col> <col></col> </colgroup> ... ... </table>
table-layout:fixed引起的宽度计算问题,布布扣,bubuko.com
标签：style c class blog code java
原文地址：http://www.cnblogs.com/sir-jarvis/p/3746788.html
