Fixed header in HTML Table

Question

I've tried every possible solution to get this to work, but nothing seems to be working.

I have this webpage I've created, and I have a table shown here, and I want to have my header fixed. That part I have mastered, but the thead columns dont align to the tbody columns.

I have tried assigning width to my td's manually, that didn't work either.

This is my code so far:

.tableSqlContent {
    table-layout: fixed;
    border-collapse: collapse;
}    

.tableSqlContent th, td {
    padding: 7px;
    text-align: left;
}
.tableSqlContent thead {
    background-color: #003265;
    color: white;
    font-weight: bold;
    cursor: default; 
}    

.tableSqlContent thead tr {
    display:inline-block;
    position: relative;
    height: 37px;
}

.tableSqlContent tbody tr td:nth-child(1) {min-width: 33%;}
.tableSqlContent tbody tr td:nth-child(2) {min-width: 20%;}
.tableSqlContent tbody tr td:nth-child(3) {min-width: 20%;}
.tableSqlContent tbody tr td:nth-child(4) {min-width: 10%;}
.tableSqlContent tbody tr td:nth-child(5) {min-width: 10%;}
.tableSqlContent tbody tr td:nth-child(6) {min-width: 7%;}
.tableSqlContent thead tr th:nth-child(1) {min-width: 33%;}
.tableSqlContent thead tr th:nth-child(2) {min-width: 20%;}
.tableSqlContent thead tr th:nth-child(3) {min-width: 20%;}
.tableSqlContent thead tr th:nth-child(4) {min-width: 10%;}
.tableSqlContent thead tr th:nth-child(5) {min-width: 10%;}
.tableSqlContent thead tr th:nth-child(6) {min-width: 7%;}

.tableSqlContent tbody {
    display: block;
    height: 700px;
    overflow: auto;
    
}    

.tableSqlContent tbody tr:nth-child(even) {
    background-color: #eeeeee;
}
.tableSqlContent tbody tr:hover {
    color: #003265;
    cursor: pointer;
    background-color: #dddddd;
}

<table Class="tableSqlContent">
                        <thead>
                            <tr>
                                <th>Connectionstring</th>
                                <th>Klinik Navn</th>
                                <th>IP_Adresse</th>
                                <th>P-nummer</th>
                                <th>Systemtype</th>
                                <th>Version</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                foreach($dbh->query($query) as $rows){
                                ?>
                                <tr>
                                    <td><?php echo $rows['ConnectionString']?></td>
                                    <td><?php echo $rows['Name']?></td>
                                    <td><?php echo $rows['IP_Adresse']?></td>
                                    <td><?php echo $rows['Ydernummer']?></td>
                                    <td><?php echo $rows['Systemtype']?></td>
                                    <td><?php echo $rows['Version']?></td>
                                </tr>
                            <?php
                            }
                            ?>
                        </tbody>
                    </table>

This is how it looks:

@Gerard As said, I have tried everything and nothing seems to be working =) — Michael Ejvind Therkildsen
– Michael Ejvind Therkildsen, Commented Sep 28, 2018 at 8:35

Gerard · Accepted Answer · 2018-09-28 09:32:40Z

This seems to be working.

.fixed_header {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 200px;
  width: 100%;
}

.fixed_header thead {
  background: black;
  color: #fff;
}

.fixed_header thead tr {
  display: block;
}

.fixed_header th,
.fixed_header td {
  text-align: left;
  width: 100px;
  max-width: 100px;
}

<table class="fixed_header">
  <thead>
    <tr>
      <th>Connection string</th>
      <th>Klinik Navn</th>
      <th>IP_Adresse</th>
      <th>P-nummer</th>
      <th>Systemtype</th>
      <th>Version</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
    <tr>
      <td>row 8-0</td>
      <td>row 8-1</td>
      <td>row 8-2</td>
      <td>row 8-3</td>
      <td>row 8-4</td>
    </tr>
    <tr>
      <td>row 9-0</td>
      <td>row 9-1</td>
      <td>row 9-2</td>
      <td>row 9-3</td>
      <td>row 9-4</td>
    </tr>
    <tr>
      <td>row 10-0</td>
      <td>row 10-1</td>
      <td>row 10-2</td>
      <td>row 10-3</td>
      <td>row 10-4</td>
    </tr>
    <tr>
      <td>row 11-0</td>
      <td>row 11-1</td>
      <td>row 11-2</td>
      <td>row 11-3</td>
      <td>row 11-4</td>
    </tr>
    <tr>
      <td>row 12-0</td>
      <td>row 12-1</td>
      <td>row 12-2</td>
      <td>row 12-3</td>
      <td>row 12-4</td>
    </tr>
    <tr>
      <td>row 13-0</td>
      <td>row 13-1</td>
      <td>row 13-2</td>
      <td>row 13-3</td>
      <td>row 13-4</td>
    </tr>
    <tr>
      <td>row 14-0</td>
      <td>row 14-1</td>
      <td>row 14-2</td>
      <td>row 14-3</td>
      <td>row 14-4</td>
    </tr>
    <tr>
      <td>row 15-0</td>
      <td>row 15-1</td>
      <td>row 15-2</td>
      <td>row 15-3</td>
      <td>row 15-4</td>
    </tr>
    <tr>
      <td>row 16-0</td>
      <td>row 16-1</td>
      <td>row 16-2</td>
      <td>row 16-3</td>
      <td>row 16-4</td>
    </tr>
    <tr>
      <td>row 17-0</td>
      <td>row 17-1</td>
      <td>row 17-2</td>
      <td>row 17-3</td>
      <td>row 17-4</td>
    </tr>
    <tr>
      <td>row 18-0</td>
      <td>row 18-1</td>
      <td>row 18-2</td>
      <td>row 18-3</td>
      <td>row 18-4</td>
    </tr>
    <tr>
      <td>row 19-0</td>
      <td>row 19-1</td>
      <td>row 19-2</td>
      <td>row 19-3</td>
      <td>row 19-4</td>
    </tr>
    <tr>
      <td>row 20-0</td>
      <td>row 20-1</td>
      <td>row 20-2</td>
      <td>row 20-3</td>
      <td>row 20-4</td>
    </tr>
    <tr>
      <td>row 21-0</td>
      <td>row 21-1</td>
      <td>row 21-2</td>
      <td>row 21-3</td>
      <td>row 21-4</td>
    </tr>
  </tbody>
</table>

An explanation of how this is supposed to work would be useful man! :)

Sigma · Accepted Answer · 2018-09-28 09:53:46Z

1

You need to remove some css because is in conflict:

        .tableSqlContent {
            table-layout: fixed;
            border-collapse: collapse;
            overflow: auto;
        }    

        .tableSqlContent th, td {
            padding: 7px;
            text-align: left;
        }
        .tableSqlContent thead {
            background-color: #003265;
            color: white;
            font-weight: bold;
            cursor: default; 
        }

        .tableSqlContent tbody tr:nth-child(even) {
            background-color: #eeeeee;
        }
        .tableSqlContent tbody tr:hover {
            color: #003265;
            cursor: pointer;
            background-color: #dddddd;
        }
        thead th {
            position: sticky;
            position: -webkit-sticky;
            top: 0px;
            z-index: 999999;
            background-color: #003265;
        }

<table class="tableSqlContent">
  <thead>
    <tr>
      <th>Connectionstring</th>
      <th>Klinik Navn</th>
      <th>IP_Adresse</th>
      <th>P-nummer</th>
      <th>Systemtype</th>
      <th>Version</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
    <tr>
      <td>1111</td>
      <td>2222</td>
      <td>3333</td>
      <td>4444</td>
      <td>5555</td>
      <td>6666</td>
    </tr>
  </tbody>
</table>

hope it helps

-- added css for sticky header.

edited Sep 28, 2018 at 9:53

answered Sep 28, 2018 at 8:49

Sigma

4074 silver badges17 bronze badges

8 Comments

Michael Ejvind Therkildsen Over a year ago

Now they are aligned.. but the fixed header is not working now =D

Sigma Over a year ago

now it should be as you expect, added css code for sticky header.

Michael Ejvind Therkildsen Over a year ago

I'm sorry to say that now all the rows are filling up my site vertically, and the scroll function from my overflow is gone, so still no fixed header function :P (I've commented out my own CSS to add yours, just to be clear on what I've done =))

Sigma Over a year ago

Sincerly i didnt see any scroll function (if you say function i suppose a js function for scroll) but based on your code its supposed that the fixed header to be made in pure css and from the code snippet its working. Also in your code when you define .tableSqlContent tbody tr td:nth-child you have duplicated content but its ok np. may be a live version of how it looks to you can help us to help you. Thanks.

Michael Ejvind Therkildsen Over a year ago

youtube.com/watch?v=qpqcmLVhb7U I've posted a video of it all, because it's based on a local network environment.

|

Collectives™ on Stack Overflow

Fixed header in HTML Table

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related