td/thのパーセンテージの幅が有効でない（jsfiddle）

Question

テーブルを純粋なCSSでスタイルしたいと思います。ボディは垂直方向にスクロールできるのに対し、ヘッダは固定できます。
これは私を混乱何私のdemo

/*css for fixed header, vertically scrollable body*/ 
 

 
.fixedHeader { 
 
    width: 100%; 
 
} 
 

 
.fixedHeader thead { 
 
    display: block; 
 
    width: cal(100% - 17px); 
 
} 
 

 
.fixedHeader tbody { 
 
    display: block; 
 
    width: 100%; 
 
    max-height: 200px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 

 
/*custom appearance for your table*/ 
 

 
.fixedHeader { 
 
    border: 1px solid gray; 
 
    border-collapse: collapse; 
 
} 
 

 
.fixedHeader th, 
 
.fixedHeader td { 
 
    border: 1px solid gray; 
 
}

<table class="fixedHeader"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Color</th> 
 
     <th>Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pear</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grape</td> 
 
     <td>Purple/Green</td> 
 
     <td>These are purple and green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Orange</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Banana</td> 
 
     <td>Yellow</td> 
 
     <td>These are yellow.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Kiwi</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plum</td> 
 
     <td>Purple</td> 
 
     <td>These are Purple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Watermelon</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tomato</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cherry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cantelope</td> 
 
     <td>Orange</td> 
 
     <td>These are orange inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Honeydew</td> 
 
     <td>Green</td> 
 
     <td>These are green inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Papaya</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raspberry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Blueberry</td> 
 
     <td>Blue</td> 
 
     <td>These are blue.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mango</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Passion Fruit</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

では、TD /番目に割合の幅が参照する要素であること（おそらく私の理解は完全に間違っている、私を修正してください）です地球上で？

Answer 1

このリンク： JS Fiddle は動作するはずです。この表のCSSを参考にしてみてください。ここでは、CSSは次のとおりです。

table.scroll { 
width: 100%; /* Optional */ 
/* border-collapse: collapse; */ 
border-spacing: 0; 
border: 2px solid black; 
} 

table.scroll tbody, 
table.scroll thead { display: block; } 

thead tr th { 
height: 30px; 
line-height: 30px; 
/*text-align: left;*/ 
} 

table.scroll tbody { 
height: 100px; 
overflow-y: auto; 
overflow-x: hidden; 
} 

tbody { border-top: 2px solid black; } 

tbody td, thead th { 
width: 20%; /* Optional */ 
border-right: 1px solid black; 
} 

tbody td:last-child, thead th:last-child { 
border-right: none; 
} 

EDIT

Javascriptがこれまでメインキーです：

// Adjust the width of thead cells when window resizes 
$(window).resize(function() { 
// Get the tbody columns width array 
colWidth = $bodyCells.map(function() { 
    return $(this).width(); 
}).get(); 

// Set the width of thead columns 
$table.find('thead tr').children().each(function(i, v) { 
    $(v).width(colWidth[i]); 
});  
}).resize(); // Trigger resize handler 

それがお役に立てば幸いです。

Answer 2

固定幅tdとthを使用できます。position:fixed〜theadも指定できます。だからtheadはテーブルの上にとどまり、tbodyはスクロールします。あなた `幅

.fixedHeader{ 
 
    width:480px; 
 
    max-height:200px; 
 
    overflow-y:auto; 
 
    overflow-x:hidden; 
 
    display:block; 
 
} 
 
.fixedHeader thead{ 
 
    position:fixed; 
 
    background:blue; 
 
    color:white 
 
} 
 
/*custom appearance for your table*/ 
 
.fixedHeader{ 
 
    border:1px solid gray; 
 
    border-collapse:collapse; 
 
} 
 

 
.fixedHeader th, .fixedHeader td{ 
 
    border:1px solid gray; 
 
    width:150px 
 
}

<table class="fixedHeader"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Color</th> 
 
     <th>Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pear</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grape</td> 
 
     <td>Purple/Green</td> 
 
     <td>These are purple and green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Orange</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Banana</td> 
 
     <td>Yellow</td> 
 
     <td>These are yellow.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Kiwi</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plum</td> 
 
     <td>Purple</td> 
 
     <td>These are Purple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Watermelon</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tomato</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cherry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cantelope</td> 
 
     <td>Orange</td> 
 
     <td>These are orange inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Honeydew</td> 
 
     <td>Green</td> 
 
     <td>These are green inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Papaya</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raspberry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Blueberry</td> 
 
     <td>Blue</td> 
 
     <td>These are blue.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mango</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Passion Fruit</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>