2016-09-22 54 views
0

我不知道哪個是處理引導3中的靜態表頭並保持引導表css類的響應式設計的最佳方式。引導3 - 靜態表頭實現

所以<滾動表格行時,>標籤應該是靜態的。

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

必須使用DIV CLASS = 「表響應」 得到它完全負責,你可以使用table class =「table」裏面,查de文檔: http://www.w3schools.com/boots陷阱/ bootstrap_ref_css_tables.asp – JoelBonetR

回答

0

我不能評論,因爲我沒有足夠的代表。

因此,基本上你想關閉bootstrap中thead元素的響應部分?只是正常?

0

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> 

試試這個..