Click here to Skip to main content
15,306,017 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Sorry if this is a little vague. I have been attempting to use build a simple table. I have been following this tutorial, though when I run the site, the css doesnt seem to work. some parts do, for example the row colouring, but nothing else. Rather odd, hopefully one of you can help me out.

What I have tried:

Html:

<pre>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mankey Activity</title>
    <link rel="stylesheet" href="/static/styles.css"/>
  </head>
  <body>
    <table class="table">
      <tr class="table__header">
        {% for header in headings %}
        <th class="table__cell>">{{ header }}</th>
        {% endfor %}
      </tr>
      {% for row in data %}
      <tr class="table__row">
        {% for cell in row %}
        <td class="table__cell">{{ cell }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </table>
  </body>
</html>


CSS:

.table {
  border-spacing: 0;
  border-radius: 4;
  margin: 1rem;
  background-color: #f5f5f5;
}

.table__row:nth-child(even) {
  background-color: #e5e5e5;
}

.table__header {
  text-align: left;
}


.table__cell {
  padding: 8px;
  text-align: left;
}


Site:

https://i.stack.imgur.com/IgrTz.png[^]
Posted
Updated 19-Sep-21 22:47pm

1 solution

Quote:
HTML
<th class="table__cell>">
You've got an extra > on the end of your class name, which isn't valid. It should be:
HTML
<th class="table__cell">

But looking at that code, I don't think much of the tutorial you're following. Using CSS classes to differentiate between the table header and the table body isn't necessary if you use the proper table markup:
HTML
<table class="table">
    <thead>
        <tr>
            {% for header in headings %}
            <th>{{ header }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in data %}
        <tr>
            {% for cell in row %}
            <td>{{ cell }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
CSS
.table {
    border-spacing: 0;
    border-radius: 4;
    margin: 1rem;
    background-color: #f5f5f5;
}
.table th,
.table td {
    text-align: left;
    padding: 8px;
}
.table tbody tr:nth-child(even) {
    background-color: #e5e5e5;
}
Demo[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900