Question

我有一个从数据库返回正确结果的查询，我想用结果填充HTML表。但是，我只获取数据＆＃34; raw＆＃34;显示，表格不会显示应该根据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>数据。 / p>

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

1 个答案: