1

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: enter image description here

Funk Forty Niner
  • 74,450
  • 15
  • 68
  • 141
Michael Ejvind Therkildsen
  • 41
  • 1
  • 9

2 Answers2

2

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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • An explanation of how this is supposed to work would be useful man! :) –  Sep 28 '18 at 12:12
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.

Sigma
  • 387
  • 3
  • 17
  • Now they are aligned.. but the fixed header is not working now =D – Michael Ejvind Therkildsen Sep 28 '18 at 08:54
  • now it should be as you expect, added css code for sticky header. – Sigma Sep 28 '18 at 09:21
  • 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 =)) – Michael Ejvind Therkildsen Sep 28 '18 at 09:41
  • 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. – Sigma Sep 28 '18 at 09:48
  • https://www.youtube.com/watch?v=qpqcmLVhb7U I've posted a video of it all, because it's based on a local network environment. – Michael Ejvind Therkildsen Sep 28 '18 at 10:08
  • I see the video but seems the css code is different from what i posted here. sometimes you must clear cache when on localhost and sincerely if possible to have a look to the code directly may be using anydesk. – Sigma Sep 28 '18 at 10:17
  • https://www.youtube.com/watch?v=EyNtoz7QM4Y This is the site with the CSS you posted :/ – Michael Ejvind Therkildsen Sep 28 '18 at 10:48
  • Sincerely i try in my localhost and is working fine. At this point i think there is some other css code that assign to the table different style. Please check with dev tools inspector the generated table and the style it is taking. – Sigma Sep 28 '18 at 10:53