Populate HTML Table with fetched SQL Data - Implement Table Class

Question

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

Could you please add the CSS code in your question? Anything containing .table-class should be included. — Arman Ozak
– Arman Ozak, Commented Jan 31, 2016 at 12:18
I'm not familiar with PHP but aren't you missing the <tbody>…</tbody> tags? The <table class="table-class"> is right, btw. — PerlDuck
– PerlDuck, Commented Jan 31, 2016 at 12:18
Uhh, I think i got it: The while-loop lacks the closing }. — PerlDuck
– PerlDuck, Commented Jan 31, 2016 at 12:21
@PerlDog that didn't do the trick, but thanks, missed that. Where to the tbody tags go? — ffritz
– ffritz, Commented Jan 31, 2016 at 12:23
@FelixF. That completely changes things. I thought you see only garbage or the php code or something in the browser. Have you included your CSS into your page? no typos? Instead of <table class=...> try out <table style="color:blue;"> and see if it's blue then. — PerlDuck
– PerlDuck, Commented Jan 31, 2016 at 13:12

Arman Ozak · Accepted Answer · 2016-01-31 13:31:35Z

2

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.

answered Jan 31, 2016 at 13:31

Arman Ozak

2,34413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ffritz Over a year ago

This works in terms of that I see the CSS working, thank you very much. However, it doesn't look like the codepen example. Am I misunderstanding something, do I miss some code to make it look like it?

Arman Ozak Over a year ago

I had not even noticed the pen (until now). It appeared to me that you needed support on using the data attribute and making the table border work and that's what I tried to help about. I think you can do the rest easily, adding some background, border radius, colors, fonts, etc. Piece of cake... Right? Let me know if you get stuck and I'll try to get you through.

Collectives™ on Stack Overflow

Populate HTML Table with fetched SQL Data - Implement Table Class

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related