固定HTML表格中的标题

时间：2018-09-28 08:28:20

标签： html css

我已经尝试了所有可能的解决方案以使其正常工作，但似乎没有任何效果。

我已经创建了此网页，并且这里显示了一个表格，并且想要修复标题。我已经掌握了那部分，但是thead列与tbody列不对齐。

我尝试手动为我的td分配宽度，但这也不起作用。

到目前为止，这是我的代码：

.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>

这是它的外观： enter image description here

2 个答案:

答案 0 :(得分：0)

由于冲突，您需要删除一些CSS：

        .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>

希望有帮助

-为粘性标题添加了CSS。

答案 1 :(得分：0)

这似乎有效。

.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>

相关问题
最新问题