使用获取的 SQL 数据填充 HTML 表 - 实现表类

Question

我有一个从数据库返回正确结果的查询，我想用结果填充 HTML 表。但是，我只显示“原始”数据，表格没有按照 CSS 类显示。

我的问题：我的表格类标签放置在正确的位置吗？我认为这是某个地方的错误。

  <table class="table-class">
  <thead>
    <tr><th>Car</th><th>Year</th><th>HP</th><th>Seats</th></tr>
  </thead>
<tbody>
<?php
    while($row = $resultsql->fetch_assoc()){
?>

<tr>
  <td>
    <?php echo $row['Car']; ?>
  </td>
  <td>
    <?php echo $row['Year']; ?>
  </td>
  <td>
    <?php echo $row['HP']; ?>
  </td>
  <td>
    <?php echo $row['Seats']; ?>
  </td>
</tr>
  <?php
  }
  ?>

  </tbody>
</table>

我的 CSS：

.table-class  {
  margin: 1em 0;
  width: 100%;
}
@media (min-width: 480px) {
  .table-class {
    width: auto;
  }
}
.table-class  tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.table-class  tr td {
  text-align: left;
}
@media (min-width: 480px) {
  .table-class  tr td {
    text-align: center;
  }
}
.table-class  tr td:first-of-type {
  text-align: left;
}
.table-class  th {
  display: none;
}
.table-class  td {
  display: block;
}
.table-class  td:first-child {
  padding-top: .5em;
}
.table-class  td:last-child {
  padding-bottom: .5em;
}
.table-class  td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 9em;
  display: inline-block;
}
@media (min-width: 480px) {
  .table-class  td:before {
    display: none;
  }
}
.table-class  th:first-of-type {
  text-align: left;
}
.table-class  th, .table-class  td {
  text-align: center;
}
@media (min-width: 480px) {
  .table-class  th, .table-class  td {
    display: table-cell;
    padding: .25em .5em;
  }
  .table-class  th:first-child, .table-class  td:first-child {
    padding-left: 0;
  }
  .table-class  th:last-child, .table-class  td:last-child {
    padding-right: 0;
  }
}

Answer 1

您的代码有两个问题：

(1) 每个<td> 都应该有它们各自的<th> 值作为它们的data-th 属性，而这是缺失的。

<?php
    echo '<tr>';
    echo '<td data-th="Car">' . $row['Car'] . '</td>';
    echo '<td data-th="Year">' . $row['Year'] . '</td>';
    echo '<td data-th="HP">' . $row['HP'] . '</td>';
    echo '<td data-th="Seats">' . $row['Seats'] . '</td>';
    echo '</tr>';
?>

(2) 边框属性应该添加到<td> 标签而不是<tr> 标签。表行不支持此属性。检查这个fiddle。

好吧，我对 CSS 代码做了一些修改（基本上将所有媒体查询放在一起），但它演示了如何为表格添加边框并以响应方式使用 <th> 数据。