Flask with CSS doesnt seem to be working properly

Question

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 19-Sep-21 6:49am

jcjakec

Updated 19-Sep-21 22:47pm

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Answer 1 · 2021-09-19T22:47:00

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[^]

Flask with CSS doesnt seem to be working properly

1 solution

Solution 1

Add your solution here

Preview 0

Flask with CSS doesnt seem to be working properly

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us