make 1表固定表

我有一個HTML表格，我想讓第一行固定，而我滾動時，我能夠使固定的標題行，但我也想我的表我的第一行也留下來固定。它已經2天，我試圖'沒有成功。那裏的任何人遇到過這種問題？make 1表固定表

<table> 
    <thead> 
     <tr> 
     <th>Header 1</th><th>Header 2</th> // this i have fixed already 
     </tr> 
    </thead> 
    <tbody> 
     <tr>....</tr> // this row i want to make fixed while i scroll. 
     <tr>....</tr> 
    </tbody> 
</table>

JSFiddle至今i'hv得到這個淨

來源

2011-12-28 FosterZ

退房[克里斯Coyer的持久性標題的文章（http://css-tricks.com/persistent-headers/）。 – 2011-12-28 07:10:11

我已經修復了我的頭文件。我想我的第一行保持固定 – FosterZ 2011-12-28 07:22:31

表可以有多個tbody元素，因此您可以將此固定行添加到第一個tbody，並將行休息到第二個tbody。然後就是用css來設置它。

工作演示：http://jsfiddle.net/sMMZ9/4/

演示是基於this solution

來源

2011-12-28 07:33:14 Krzysztof

thanx一噸人！讓我試試這個 – FosterZ 2011-12-28 07:40:21

嗨，再來一次。現在我的第一行是固定的，當列的內容越來越大，單元格的寬度也越來越大n，從而使行寬度受到干擾，我試着把'table-layout：fixed;'但沒有使用 – FosterZ 2011-12-28 13:03:08

寬度有錯，並且可能有問題。嘗試這一個：http://jsfiddle.net/sMMZ9/4/ – Krzysztof 2011-12-28 13:55:11

這個怎麼樣：

.scrollContent > tr:first-child{ 
    position: fixed; 
}

來源

2011-12-28 07:18:46 akai

我試過，但寬度是getin'完全搞砸了 – FosterZ 2011-12-28 07:23:59

你需要插入<thead>元素中第一行並應用相同的CSS，你已經應用對於th元素： -

<thead class="fixedHeader"> 
    <tr class="alternateRow"> 
     <th><a href="#">Header 1</a></th> 
     <th><a href="#">Header 2</a></th> 
     <th><a href="#">Header 3</a></th> 
    </tr> 
    <tr class="normalRow"> 
     <td>Cell Content 1</td> 
     <td>Cell Content 2</td> 
     <td>Cell Content 3</td> 
    </tr> 
</thead>

CSS

html > body thead.fixedHeader td { 
    width: 200px; 
}

您還可以添加邊框，按您的design.Hope它會幫助你肯定的。

來源

2011-12-28 07:21:43 Gurvinder

如果我這樣做，我的第一行的列寬將會混亂起來，而且我的每列寬都是從數據庫getin'。 – FosterZ 2011-12-28 07:29:32

看到此鏈接
https://github.com/cheald/floatingFixed
它有一個jQuery插件，這可能是你想要的。

來源

2011-12-28 07:29:17

看到，當元素在窗口上方向上時，你的將被卡住。在我的情況下，表格內容是可滾動的，並且我希望我的行可以像固定標題一樣修復，請參閱我在jsfiddle上的示例 – FosterZ 2011-12-28 07:34:52

okk現在我可以得到您的要點 – 2011-12-28 07:37:14

make 1表固定表

回答

相關問題