Django模板中如何为Pandas DataFrame导出的HTML表格添加样式

完全可以在模板中为该表格添加自定义样式，以下是两种常用实现方案：

方案1：在模板侧包裹容器添加样式 #

这种方式不需要修改后端代码，直接调整模板即可：

1. 在results.html的<head>标签中加入自定义样式：

<style>
/* 限定仅作用于我们包裹的表格容器内，避免影响页面其他表格 */
.data-table-wrap table {
  border-collapse: collapse;
  width: 100%;
}
/* 实现表头居中 */
.data-table-wrap th {
  text-align: center;
  /* 调整文字和边框的间距，可按需修改数值 */
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
}
/* 实现单元格内容与边框增加间距 */
.data-table-wrap td {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
}
</style>

2. 将表格输出代码包裹在对应类名的容器中：

<div class="data-table-wrap">
{{ table|safe }}
</div>

方案2：在Pandas生成HTML时指定类名 #

如果希望更精准控制样式，也可以在后端调用to_html时直接给表格元素绑定自定义类：

1. 修改后端Python代码：

# classes参数指定表格的自定义类名
table = df.to_html(index=False, classes='my-data-table')
return render(request, 'results.html',{'table': table})

2. 在模板样式中直接针对该类编写样式即可：

.my-data-table th {
  text-align: center;
  padding: 8px 12px;
}
.my-data-table td {
  padding: 8px 12px;
}

两种方案都可以实现你需要的文字与边框增加间距、列标题居中对齐的效果，你可以根据自己的使用场景选择。

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