Bootstrap固定表頭

我想用Bootstrap實現固定頭表。由於bootstrap 3.3.5本身不支持固定頭文件表，所以基於這個https://bootsnipp.com/snippets/oVlgM我想出了一個很好的滾動條。Bootstrap固定表頭

但是，當沒有滾動時它看起來很醜。我試圖修復一段時間，但無法修復它。我不是UI專家。

滾動版本看起來不錯。 https://jsfiddle.net/cdc57pzm/

沒有滾動醜陋https://jsfiddle.net/suwLv1md/2/

數據沒有正確對齊
線超過了表的

有人能幫助我嗎？

我試着下面更改爲100％，但滾動的版本休息..

.table-fixed thead, .table-fixed tfoot { 
    width: 97%; 
}

來源

2017-06-01 Developer

請試試這個傢伙，

.table-fixed thead, .table-fixed tfoot { 
width: 100% !important; }

來源

2017-06-01 13:31:12

已經嘗試過。它破壞了數據並且沒有正確對齊。這是我的問題https://jsfiddle.net/cdc57pzm/2/ – Developer

這將完成這項工作。 https://jsfiddle.net/cdc57pzm/3/ –

我需要它與腳註。同樣沒有數據對齊問題，因爲我們在頁腳 – Developer

我認爲，如果你還設置TBODY的寬度，它的工作到97％，就像thead和tfoot一樣。這意味着一點點改變你的CSS的頂部和底部，像這樣：

.table-fixed thead, .table-fixed tfoot, .table-fixed tbody { 
    width: 97%; 
    } 

@media (max-width: 767px) { 
    .table-fixed thead, .table-fixed tfoot { 
     width: 97%; 
    } 
}

如在此琴：https://jsfiddle.net/hpvl/suwLv1md/4/

來源

2017-08-05 16:06:47

所以，如果你可以使用一些JQ這是我發現的作品我用這在我有兩個不同的表格。有些是由Knockout.js創建的，有些是使用某些PHP和自動滾動動態創建的，有些是靜態的。使他們工作的概念都是一樣的。

的CSS：

table thead { 
    width: 100%; 
    display: block; 
    position: relative; 
} 

table tbody { 
    display: block; 
    overflow-y: hidden; /* Or what ever you choose */ 
    overflow-x: hidden; 
    height: 350px; /* Percents don't really work in a dynamic setting so keep that in mind */ 
}

的JS：

$(table + ' tbody tr:last-of-type td').each(function(a, b, c) { 
    var w = $(this).css('width'), 
    i = parseInt(a); 

    $(table + ' thead tr th').eq(i).css('width', w); 
});

差不多那就是使得它的工作的JS，關鍵是我們要在標題單元格設置爲相同的寬度身體。所以當我們有一個滾動的表體時會發生什麼，瀏覽器將滾動條的寬度從最後一個單元格移開。這給了我們與標題單元格和主體單元格不匹配。在這種情況下，如果您需要使表格流體的使用百分比，除了最後一列外，所有列的百分比都是可以預測的。

This post指出我在正確的方向。

編輯：

我忘了提及的所有實例我有這個實施的引導-3表。

來源

2017-08-10 15:10:39

Bootstrap固定表頭

回答

相關問題