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>

嘗試這個..