Flask项目中CSS样式部分生效问题求助

嘿，我瞅了下你的代码，很快就发现了两个导致CSS样式大部分不生效的问题：

1. HTML标签的语法错误 #

在表头的<th>标签里，你写错了class属性的语法：

<th class="table__cell>">{{ header }}</th>

这里的class="table__cell>"多了一个闭合的尖括号>，导致浏览器无法正确识别这个class，所以表头的对齐样式、单元格的内边距样式都没作用到元素上。

2. CSS属性缺少单位 #

你的CSS里border-radius: 4;这个属性没有指定单位（比如px），浏览器无法解析这个值，所以表格的圆角样式不生效。

修正后的代码 #

修正后的HTML代码 #

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

（主要修正了<th>标签里的class属性，去掉了多余的>）

修正后的CSS代码 #

.table { 
    border-spacing: 0; 
    border-radius: 4px; /* 添加了px单位 */
    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; 
}

（给border-radius添加了px单位，确保浏览器能正确解析）

修正之后，你应该就能看到表格的背景色、表头对齐、单元格内边距、圆角这些样式都正常生效了，偶数行着色的功能也会保持正常。

内容的提问来源于stack exchange，提问作者jcjakec