2017-01-27 7 views
0

同時にスクロールするテーブルが必要ですが、同時に弾力的です(ウィンドウやコンテナの100%)。弾性テーブル幅固定のカラムとヘッダ

基本的に、私は

誰かが私はこのJSFiddleでテーブルを作る助けてもらえあまりにも凍結されたヘッダと最後の列を持つテーブルが必要になります。https://jsfiddle.net/Ln8opp3v/)弾性?

.fixed_headers { 
 
    width: 750px; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
.fixed_headers th { 
 
    text-decoration: underline; 
 
} 
 
.fixed_headers th, 
 
.fixed_headers td { 
 
    padding: 5px; 
 
    text-align: left; 
 
} 
 
.fixed_headers td:nth-child(1), 
 
.fixed_headers th:nth-child(1) { 
 
    min-width: 200px; 
 
} 
 
.fixed_headers td:nth-child(2), 
 
.fixed_headers th:nth-child(2) { 
 
    min-width: 200px; 
 
} 
 
.fixed_headers td:nth-child(3), 
 
.fixed_headers th:nth-child(3) { 
 
    width: 350px; 
 
} 
 
.fixed_headers thead { 
 
    background-color: #333; 
 
    color: #FDFDFD; 
 
} 
 
.fixed_headers thead tr { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.fixed_headers tbody { 
 
    display: block; 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
.fixed_headers tbody tr:nth-child(even) { 
 
    background-color: #DDD; 
 
} 
 
.old_ie_wrapper { 
 
    height: 300px; 
 
    width: 750px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.old_ie_wrapper tbody { 
 
    height: auto; 
 
}
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. --> 
 
<!--[if lte IE 9]> 
 
<div class="old_ie_wrapper"> 
 
<!--<![endif]--> 
 

 
<table class="fixed_headers"> 
 
    <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> 
 

 
<!--[if lte IE 9]> 
 
</div> 
 
<!--<![endif]-->

+0

あなた 'は、弾性すること' とはどういう意味ですか? –

+0

私はウィンドウの100%を置くことを意味し、ウィンドウのサイズを変更するとテーブルのサイズも変更されます。 – Moutimedia

答えて

0

私はあなたが何をしようとしていることの目的を理解していないが、あなたは%などvw測定とそれを達成することができます。

スクロールバーが必要な場合は、幅または高さを制限する必要があることを忘れないでください。柔軟なコンテンツはスクロールバーを起動しません。

.fixed_headers { 
 
    width: 750px; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
.fixed_headers th { 
 
    text-decoration: underline; 
 
} 
 
.fixed_headers th, 
 
.fixed_headers td { 
 
    padding: 5px; 
 
    text-align: left; 
 
} 
 
.fixed_headers td:nth-child(1), 
 
.fixed_headers th:nth-child(1) { 
 
    min-width: 200px; 
 
} 
 
.fixed_headers td:nth-child(2), 
 
.fixed_headers th:nth-child(2) { 
 
    min-width: 200px; 
 
} 
 
.fixed_headers td:nth-child(3), 
 
.fixed_headers th:nth-child(3) { 
 
    width: 350px; 
 
} 
 
.fixed_headers thead { 
 
    background-color: #333; 
 
    color: #FDFDFD; 
 
} 
 
.fixed_headers thead tr { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.fixed_headers tbody { 
 
    display: block; 
 
    overflow: scroll; 
 
    width: 100vw; 
 
    height: 300px; 
 
} 
 
.fixed_headers tbody tr:nth-child(even) { 
 
    background-color: #DDD; 
 
} 
 
.old_ie_wrapper { 
 
    height: 300px; 
 
    width: 750px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.old_ie_wrapper tbody { 
 
    height: auto; 
 
}
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. --> 
 
<!--[if lte IE 9]> 
 
<div class="old_ie_wrapper"> 
 
<!--<![endif]--> 
 

 
<table class="fixed_headers"> 
 
    <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> 
 

 
<!--[if lte IE 9]> 
 
</div> 
 
<!--<![endif]-->

関連する問題