CODEWITHSUNDEEP
htmlmysqlcss
ffritz
ffritz

Reputation: 2261

Populate HTML Table with fetched SQL Data - Implement Table Class

I have a query which returns correct results form the database, I want to populate a HTML table with the results. However, I only get the data "raw" displayed, the table is not displayed like it should be according to the CSS class.

My question: Are my table class tags placed at the correct point? I think here is the error somewhere.

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

My 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;
  }
}

Upvotes: 0

Views: 1242

Answers (1)

Arman Ozak
Arman Ozak

Reputation: 2344

There are two issues about your code:

(1) Each <td> should have their respective <th> values as their data-th attribute and this is missing.

<?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) The border properties should be added to the <td> tags and not the <tr> tags. Table rows do not support this property. Check this fiddle.

Well, I have made a few modifications to the CSS code (basically put all the media queries together), but it demonstrates how you can add borders to your table and use <th> data in a responsive way.

Upvotes: 2

Related Questions