Fixed first row in a table

Question

I have a website that is created by a software. On the page I have a table like this:

<table>
    <tbody>
        <tr id="header">
            <th>Header1
            <th>Header2
            <th>Header3
        <tr>
            <td>Info1
            <td>Info2
            <td>Info3
        <tr>
            <td>Info4
            <td>Info5
            <td>Info6

Don't ask me how it works without the closing tags but it does. What I want to do is have the first row "<tr id="header">" fixed when I scroll down the page or even within the page if possible.

I found many solutions but they were asking for <thead> and all that, but I can only work with what I have...

I'm pretty sure jQuery can do this but I'm just starting out with Jquery...

You can do this in just CSS... check here: http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only — 97ldave, May 21 '13 at 15:07
It does work because HTML parsers know that there is no TR inside TH or TD, see the HTML specs to understand that. This is valid HTML (3.2 / living standard 5.0+) — hakre, May 21 '13 at 15:10
i found that link, but as i said before: i dont have the section so i have to work with what i have... — Nathan, May 21 '13 at 15:10
It's possible to use jQuery Fixed Table plugin http://www.mustafaozcan.net/en/demo/fixedtableheader/jquery-fixedtableheader-demo-en.html — Valery Viktorovsky, May 21 '13 at 15:12
Also please do reasearch on your own first. Not having that element in the (non-shadow) DOM should not pose any problems for CSS nor jQuery selectors. Please ask your questions more specifically. — hakre, May 21 '13 at 15:13
hakre, i didnt even ask about the closing tags so chill out... — Nathan, May 21 '13 at 15:19
@ValeryViktorovsky thanks man... that was right on the spot.. exactly what i asked for: no thead... put it in an answer so i can choose it as the best answer.. thanks again... — Nathan, May 21 '13 at 15:36

Valery Viktorovsky · Accepted Answer · 2013-05-21T17:41:54.090

3

You can add simple CSS to your page:

tr#header {
    position: fixed;
    }
td {
    position: relative;
    top: 25px;
    display: inline-block;
    }

Or it's possible to use jQuery Fixed Table:

<script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>
<script type="text/javascript"> 
    $(document).ready(function() { 
        $('.tbl').fixedtableheader(); 
    }); 
</script>

edited May 21 '13 at 17:41

answered May 21 '13 at 15:13

Valery Viktorovsky

6,487
3
39
47

Please add the relevant code and information to your answer. Link only answers are generally flagged. http://meta.stackexchange.com/questions/92505/should-i-flag-answers-which-contain-only-a-link-as-not-an-answer – apaul May 21 '13 at 17:22
@apaul34208 thanks, I added simple CSS code. – Valery Viktorovsky May 21 '13 at 17:29
I meant the code related to the plugin you suggested. Its a good solution, it just needs to remain useful if the link should ever go down or change. – apaul May 21 '13 at 17:40
The links from the page of the plugins, doesn't work. So better use this link to whoever need it: https://github.com/mustafaozcan/jquery.fixedtableheader – Soul Eater Oct 12 '20 at 02:58

apaul · Answer 2 · 2013-05-21T16:04:51.607

1

You could do it it in CSS alone like so:

jsFiddle

#header{
    position:fixed;
    background:blue;
    z-index:1;
}
#header th{
    border-right: 1px solid #fff;
}
#header :last-child{
    border-right: none;
}
 td{
    position:relative;
    top:25px;
    display:inline-block;
    margin-right:30px;
}

edited May 21 '13 at 16:04

answered May 21 '13 at 15:51

apaul

16,092
8
47
82

Fixed first row in a table

2 Answers2