可滚动表在bootstrap中具有固定标头 [英] Scrollable table with fixed header in bootstrap

问题描述

我试图使用bootstrap 3表创建一个带有固定标题和可滚动内容的表。
不幸的是，我发现的解决方案不适用于引导或混乱的风格。

这里有一个简单的引导表，但由于某种原因未知的tbody的高度不是10px。

  height：10px！important; overflow：scroll; 
  

http： //jsfiddle.net/T9Bhm/1/

解决方案

以下是有效解决方案

HTML

 < table class =条纹> 
< thead> 
< tr> 
< th> Make< / th> 
< th>模型< / th> 
< th>颜色< / th> 
< th>年< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td class =filterable-cell> Ford< / td> 
< td class =filterable-cell> Escort< / td> 
< td class =filterable-cell>蓝色< / td> 
< td class =filterable-cell> 2000< / td> 
< / tr> 
< tr> 
< td class =filterable-cell> Ford< / td> 
< td class =filterable-cell> Escort< / td> 
< td class =filterable-cell>蓝色< / td> 
< td class =filterable-cell> 2000< / td> 
< / tr> 
< tr> 
< td class =filterable-cell> Ford< / td> 
< td class =filterable-cell> Escort< / td> 
< td class =filterable-cell>蓝色< / td> 
< td class =filterable-cell> 2000< / td> 
< / tr> 
< tr> 
< td class =filterable-cell> Ford< / td> 
< td class =filterable-cell> Escort< / td> 
< td class =filterable-cell>蓝色< / td> 
< td class =filterable-cell> 2000< / td> 
< / tr> 
< / tbody> 
  
 
 
 
 
 
 
 
  CSS  
  table {
 width：100％; 
} 
 
 thead，tbody，tr，td，th {display：block; } 
 
 tr：after {
 content：''; 
 display：block; 
 visibility：hidden; 
 clear：both; 
} 
 
 thead th {
 height：30px; 
 
 / * text-align：left; * / 
} 
 
 tbody {
 height：120px; 
 overflow-y：auto; 
} 
 
 thead {
 / * fallback * / 
} 
 
 
 tbody td，thead th {
宽度：19.2％; 
 float：left; 
} 
  
链接到 jsfiddle  
 
I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table.
Unfortunately the solutions I have found does not work with bootstrap or mess up the style.

Here there is a simple bootstrap table, but for some reason to me unknown the height of the tbody is not 10px.
height: 10px !important; overflow: scroll;
http://jsfiddle.net/T9Bhm/1/
解决方案
Here is the working solution

HTML
<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>


CSS
table {
        width: 100%;
    }

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}
Link to jsfiddle

                        
这篇关于可滚动表在bootstrap中具有固定标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！