Question

我想知道哪个是在bootstrap 3中处理静态表头的最佳方法，并保持bootstrap table css类的响应式设计。

所以＆lt; thead＆gt;滚动表行时，tag应该是静态的。

<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>
....

Answer 1

我无法发表评论，因为我还没有足够的代表。

所以基本上你想在bootstrap中关闭thead元素的响应部分？只是正常吗？

Answer 2

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

<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>

试试这个..

Bootstrap 3 - 静态表头实现

2 个答案: