How to adjust the width of a fixed row at a html table

Question

I have put the row containing the headers of a table at a fixed position, and that made it skrink, and I can not adjust it to the width of the table, I have tried many things like width, resize, margin, etc...

Here I put images to explain it:

EXPANDED SHRINKED

Here I add the css I'm using:

table {
        border-collapse:collapse;
        table-layout: fixed;
        border: 2px solid #EA5D00;
}

tr {
        vertical-align: top;
}

tr:hover {
        background-color: #FFEDCC;
}

td {
        border: 1px solid #EA5D00;
        word-wrap: break-word;
        padding: 4px;
}

th {
        border-top: 1px solid #EA5D00;
        border-bottom: 2px solid #EA5D00;
        border-left: 1px solid #EA5D00;
        border-right: 1px solid #EA5D00;
        padding: 4px;
        color: #EA5D00;
        text-align: center;
        background-color: #FFEDCC;
}

tr.fixed { 
        position: fixed;
}

And here the html:

<table><tr class='fixed'><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
     <tr><td align="right">1</td><TD ALIGN=RIGHT >233396:</TD><TD  ALIGN=RIGHT>  A Barcelona hi ha una cultura.....

Possible duplicate of [Freeze the top row for an html table only (Fixed Table Header Scrolling)](https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling) — showdev, Nov 03 '17 at 17:11
Also see [table with fixed header at top](https://stackoverflow.com/questions/8686271/table-with-fixed-header-at-top). — showdev, Nov 03 '17 at 17:11

curveball · Answer 1 · 2017-11-03T18:01:24.893

well, assuming that you want to make the table's header to be fixed relatively to the page, this problem isn't that simple as it might look at first. To explore all the options you can google something like "html table fixed header", but here I want to share one idea that might be suitable for your particular case as I see that your table takes the whole page and starts from the very beginning of the page.

The idea is: use 2 tables! One of them is fixed and kinda of overlaps the other one that goes after it. Of course, the two have to have the same header and you have to know the widest row.

Note that the first one should't contain visible rows and the second one shouldn't contain visible header. The widest row is included in the first table to set dimensions. Again, this is very limited solution for very specific circumstances. Hope it will help:

body {margin: 0;}
table {
        border-collapse: collapse;
        8border: 1px solid #EA5D00;
}

tr {
        vertical-align: top;
}

tr:hover {
        background-color: #FFEDCC;
}

td {
        border: 1px solid #EA5D00;
        word-wrap: break-word;
        padding: 4px;
}

th {
        border-top: 1px solid #EA5D00;
        /*border-bottom: 2px solid #EA5D00;*/
        border-left: 1px solid #EA5D00;
        border-right: 1px solid #EA5D00;
        padding: 4px;
        color: #EA5D00;
        text-align: center;
        background-color: #FFEDCC;
}

table:first-of-type { 
  position: fixed;
}
table:first-of-type tr:last-child {
  visibility: hidden;
}
table:last-of-type tr:first-child {
  visibility: hidden;
}

<table>
<tr><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
</table>

<table>
<tr><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr>
<tr>
<td>Sed ut </td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
</table>

PS. instead of looking for the widest row you could also just hardcode the width of every column. It should work out too I guess.

How to adjust the width of a fixed row at a html table

1 Answers1