时间戳

首页 > 解决方案 > 修复了 HTML 表中的标题

html - 修复了 HTML 表中的标题

问题描述

我已经尝试了所有可能的解决方案来让它工作，但似乎没有任何工作。

我创建了这个网页，这里显示了一个表格，我想修复我的标题。我已经掌握了那部分，但是 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>

这是它的外观： 在此处输入图像描述

标签： htmlcss

解决方案

这似乎奏效了。

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

推荐阅读