[英]Bootstrap 3 - Static table header implementation
I wonder which is the best way to handle static table header in bootstrap 3 and keep the responsive design from bootstrap table css class. 我想知道哪种方法是在Bootstrap 3中处理静态表头并保留Bootstrap表CSS类中响应设计的最佳方法。
So < thead > tag should be static when scrolling the table rows. 因此,在滚动表行时,<thead>标记应为静态。
<table class="table table-striped">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some data..</td>
<td>Some data..</td>
</tr>
....
I can't comment as I don't have enough rep yet. 我没有足够的代表,因此无法发表评论。
So basically you want to turn off the responsive part of the thead element in bootstrap? 所以,基本上,您想关闭bootstrap中thead元素的响应部分吗? Just normal? 正常吗?
CSS 的CSS
tr {
width: 100%;
display: inline-table;
height:60px;
table-layout: fixed;
}
table{
height:300px;
display: -moz-groupbox;
}
tbody{
overflow-y: scroll;
height: 200px;
width: 100%;
position: absolute;
}
HTML 的HTML
<table class="table table-striped">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
</tr>
<tr>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
</tr>
<tr>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
</tr>
<tr>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
</tr>
<tr>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
<td>Some data..</td>
</tr>
Try this.. 尝试这个..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.