當單元格內容是一個輸入元素時，固定列寬度被破壞的HTML表格

Question

我有遺留代碼，我試圖逐步改進。

在某些時候，我有一個表table-layout: fixed。還有一個colgroup元素，用於定義每列的大小。

問題是，當單元格的內容是輸入元素時，列大小不正確。

你可以用這個代碼片斷檢查第一列應該是20px的地方。 http://jsfiddle.net/ppRgV/158/

什麼是一個很好的解決方案，不要在輸入元素上定義特定的大小？

Answer 1

嘗試......

只需設置寬度與第一列的input元素。

.RowHeader { 
 
    background-color: black; 
 
} 
 

 
.GroupCaption { 
 
    background-color: #868981; 
 
} 
 

 
.RecordPlusCollapse { 
 
    background-color: red; 
 
} 
 

 
.RowHeader input { 
 
    width: 100%; 
 
} 
 

 
.Table { 
 
    table-layout: fixed; 
 
}

<table id="Grid1_Table" class="Table"> 
 
    <colgroup> 
 
    <col style="width:20px"> 
 
    <col style="width:20px"> 
 
    <col style="width:180px"> 
 
    <col style="width:200px"> 
 
    </colgroup> 
 
    <tbody> 
 
    <tr> 
 
     <td class="RowHeader"> 
 
     <div><input></div> 
 
     </td> 
 
     <td class="RecordPlusCollapse"> 
 
     <div>&nbsp;</div> 
 
     </td> 
 
     <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

，如果你添加下面的CSS規則它的工作原理：

.RowHeader div { 
    width:20px; 
    overflow-x: hidden; 
} 

見琴：http://jsfiddle.net/n5obvd4s/1/