Bootstrap 3-静态表头实现

Question

我想知道哪种方法是在Bootstrap 3中处理静态表头并保留Bootstrap表CSS类中响应设计的最佳方法。

因此，在滚动表行时，<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>
....

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>

尝试这个..