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>