滾動表上的問題

我有一個代碼來顯示滾動表的內容。但我不確定如何做只滾動身體而不是頭部滾動。目前它發生在整個桌子上。滾動表上的問題

請幫幫我。

tbody { 
 
    display: block; 
 
} 
 

 
tbody { 
 
    height: 300px; 
 
    /* Just for the demo   */ 
 
    overflow-y: auto; 
 
    /* Trigger vertical scroll */ 
 
    overflow-x: hidden; 
 
    /* Hide the horizontal scroll */ 
 
}

<table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
    <th> SLno</th> 
 
    <th>Item name</th> 
 
    <th>Item code</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>icecream</td> 
 
    <td>100</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>biscuits</td> 
 
    <td>200</td> 
 
    </tr> 
 
</table>

來源

2017-03-17 kavi

移動表頭：

參考代碼。 –

[尋找窗口可調整表上的固定標題]可能的副本（http://stackoverflow.com/questions/8249385/looking-for-fixed-headers-on-a-window-adjustable-table） –

首先你需要在你的table的thead通過任一應用position: relative;或absolute是來自您的table的其餘部分分開。

應用display: block您tbody，讓你有一個塊級元素，你可以再申請height和overflow性質有一個理想的滾動表。 thead`和表身在`tbody`在`

table { 
 
    position: relative; 
 
    width: 700px; 
 
    background-color: #aaa; 
 
    overflow: hidden; 
 
    border-collapse: collapse; 
 
} 
 

 

 
/*thead*/ 
 

 
thead { 
 
    position: relative; 
 
    display: block; 
 
    /*seperates the header from the body allowing it to be positioned*/ 
 
    width: 700px; 
 
    overflow: visible; 
 
} 
 

 
thead th { 
 
    background-color: #99a; 
 
    min-width: 120px; 
 
    height: 36px; 
 
    min-height: 36px; 
 
    border: 1px solid #222; 
 
} 
 

 
thead th:nth-child(1) { 
 
    /*first cell in the header*/ 
 
    position: relative; 
 
    display: block; 
 
    background-color: #88b; 
 
} 
 

 

 
/*tbody*/ 
 

 
tbody { 
 
    display: block; 
 
    width: 700px; 
 
    height: 239px; 
 
    overflow-y: auto; 
 
} 
 

 
tbody td { 
 
    background-color: #bbc; 
 
    min-width: 120px; 
 
    border: 1px solid #222; 
 
    height: 36px; 
 
    min-height: 36px; 
 
}

<body> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Town</th> 
 
     <th>County</th> 
 
     <th>Age</th> 
 
     <th>Profession</th> 
 
     <th>Anual Income</th> 
 
     <th>Matital Status</th> 
 
     <th>Children</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John Smith</td> 
 
     <td>Macelsfield</td> 
 
     <td>Cheshire</td> 
 
     <td>52</td> 
 
     <td>Brewer</td> 
 
     <td>£47,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jenny Jones</td> 
 
     <td>Threlkeld</td> 
 
     <td>Cumbria</td> 
 
     <td>34</td> 
 
     <td>Shepherdess</td> 
 
     <td>£28,000</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Peter Frampton</td> 
 
     <td>Avebury</td> 
 
     <td>Wiltshire</td> 
 
     <td>57</td> 
 
     <td>Musician</td> 
 
     <td>£124,000</td> 
 
     <td>Married</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Simon King</td> 
 
     <td>Malvern</td> 
 
     <td>Worchestershire</td> 
 
     <td>48</td> 
 
     <td>Naturalist</td> 
 
     <td>£65,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lucy Diamond</td> 
 
     <td>St Albans</td> 
 
     <td>Hertfordshire</td> 
 
     <td>67</td> 
 
     <td>Pharmasist</td> 
 
     <td>Retired</td> 
 
     <td>Married</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Austin Stevenson</td> 
 
     <td>Edinburgh</td> 
 
     <td>Lothian</td> 
 
     <td>36</td> 
 
     <td>Vigilante</td> 
 
     <td>£86,000</td> 
 
     <td>Single</td> 
 
     <td>Unknown</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Wilma Rubble</td> 
 
     <td>Bedford</td> 
 
     <td>Bedfordshire</td> 
 
     <td>43</td> 
 
     <td>Housewife</td> 
 
     <td>N/A</td> 
 
     <td>Married</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Kat Dibble</td> 
 
     <td>Manhattan</td> 
 
     <td>New York</td> 
 
     <td>55</td> 
 
     <td>Policewoman</td> 
 
     <td>$36,000</td> 
 
     <td>Single</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Henry Bolingbroke</td> 
 
     <td>Bolingbroke</td> 
 
     <td>Lincolnshire</td> 
 
     <td>45</td> 
 
     <td>Landowner</td> 
 
     <td>Lots</td> 
 
     <td>Married</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alan Brisingamen</td> 
 
     <td>Alderley</td> 
 
     <td>Cheshire</td> 
 
     <td>352</td> 
 
     <td>Arcanist</td> 
 
     <td>A pile of gems</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

來源

2017-03-17 09:59:17 nashcheez

滾動表上的問題

回答

相關問題