首页 > 代码库 > table-layout:fixed引起的宽度计算问题

table-layout:fixed引起的宽度计算问题

2024-07-05 17:43:33   224人阅读

今天在应用中设置了一个表格，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>

 


联系
我们