I have a table without th elements, Only td elements are there. Is there any way to make My first row fixed(label). The table is like this
<table>
<tr>
<td>Name:</td>
<td>Age:</td>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
<tr>
......
</tr>
</table>
I want to make first row with the fields Name and Age as fixed. So that during the scrolling the labels will not disappear.
By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.
Freeze columns and rows Select the cell below the rows and to the right of the columns you want to keep visible when you scroll. Select View > Freeze Panes > Freeze Panes.
I've been searching for an answer for this problem for a while and finally I've found something that works very nice.
The secret is in this piece of code that makes the scrolling possible in the table
thead, tbody, tr, td, th { display: block; }
But you can find a full example here http://jsfiddle.net/T9Bhm/7/.
Hope it helps! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With