html - 使用获取的 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>。响应式数据。