滚动表上的问题

我有一个代码来显示滚动表的内容。但我不确定如何做只滚动身体而不是头部滚动。目前它发生在整个桌子上。滚动表上的问题

请帮帮我。

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

滚动表上的问题

回答

相关问题