table-layout:fixed引起的寬度計算問題

今天在應用中設置了一個表格，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>