セルの内容が入力要素のときに固定幅のHTMLテーブルが壊れています

Question

私は段階的に改善しようとしている従来のコードを持っています。

ある時点で私はtable-layout: fixedのテーブルを持っています。各列のサイズを定義するcolgroup要素。

セルのコンテンツが入力要素の場合、列のサイズが正しくないという問題があります。

このコードスニペットでは、最初の列が20ピクセルである必要があります。 http://jsfiddle.net/ppRgV/158/

入力要素に特定のサイズを定義しないとよいでしょうか？

Answer 1

お試しください

最初の列の入力要素に幅を設定するだけです。

.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ルールを追加する場合、それは動作します：http://jsfiddle.net/n5obvd4s/1/