theadの幅はtbodyと異なります

Question

私はスクロールでtbodyが必要です、そして、theadはスクロールを持つべきではありません。そうすることで、theadの幅はtheadのテキストのサイズに縮小されます。

のtbody

これは私が持っているものであるとして、thead要素の幅の大きさが同じにする方法はあります。 https://jsfiddle.net/Viraj173/jqwgkq8k/

CSS

tbody.scroll{ 
    overflow-y: auto; 
    height:100px;   
position: absolute; 
} 

th { 
    color: #ffffff; 
    background: #373d49; 
    padding: 5px; 
    text-align: left; 
    font-size: 14px; 
} 

HTML

<table > 
    <thead> 
     <tr> 
     <th> 
      Value 
     </th> 
     </tr>        
    </thead> 
    <tbody class="scroll"> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
     Setting Value 1 
     </td> 
    </tr> 

    </tbody> 
</table> 

Answer 1

はい、あなたは<thead>セクションで<th>タグの幅値を与えることができます。 これを試してみてください。このような

<thead> 
     <tr> 
     <th width="108px" > 
      <center> Value</center> 
     </th> 
     </tr>      
    </thead> 

：http://codepen.io/anon/pen/QdgJbg

またはあなたがちょうどこのようにCSSで編集することができます。

tbody.scroll{ 
     overflow-y: auto; 
     height:20vh;   
     position: relative; 
     display: block; 
    } 

    th { 
     color: #ffffff; 
     background: #373d49; 
     padding: 5px; 
     width:110px; 
     text-align: left; 
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
     font-size: 14px; 
     wight:20vh; 
    } 

http://codepen.io/anon/pen/dNRwWW

Answer 2

使用この：

th { 
    color: #ffffff; 
    background: #373d49; 
    padding: 5px; 
    padding-right:100px; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    font-size: 14px; 
} 

Answer 3

これは私がコード

tbody.scroll{ 
    overflow-y: auto; 
    height:20vh;   
    position: relative; 
    display: block; 
} 

https://jsfiddle.net/5ya1c55x/