Fixed first row in a table [duplicate]

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: stackoverflow.com/questions/8423768/… — 97ldave
– 97ldave, Commented May 21, 2013 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
– hakre, Commented May 21, 2013 at 15:10
i found that link, but as i said before: i dont have the <thead> section so i have to work with what i have... — Nathan
– Nathan, Commented May 21, 2013 at 15:10
It's possible to use jQuery Fixed Table plugin mustafaozcan.net/en/demo/fixedtableheader/… — Valery Viktorovsky
– Valery Viktorovsky, Commented May 21, 2013 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
– hakre, Commented May 21, 2013 at 15:13

Valery Viktorovsky · Accepted Answer · 2013-05-21 17:41:54Z

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, 2013 at 17:41

answered May 21, 2013 at 15:13

Valery Viktorovsky

6,7863 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

apaul Over a year ago

Please add the relevant code and information to your answer. Link only answers are generally flagged. meta.stackexchange.com/questions/92505/…

Valery Viktorovsky Over a year ago

@apaul34208 thanks, I added simple CSS code.

apaul Over a year ago

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.

Soul Eater Over a year ago

The links from the page of the plugins, doesn't work. So better use this link to whoever need it: github.com/mustafaozcan/jquery.fixedtableheader

apaul · Accepted Answer · 2013-05-21 16:04:51Z

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; }

Collectives™ on Stack Overflow

Fixed first row in a table [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related