Flask实现的响应式表格行内元素无法与列标题居中对齐的问题求助

我来帮你排查下这个对齐问题，主要有两个关键点导致你的数字和列标题没居中对齐：

1. 桌面端flex列宽度未均分 #

你的桌面端布局中，.responsive-table li使用了justify-content: space-between，但每个.col没有设置统一的宽度分配规则，导致列宽由内容长度决定。哪怕你给.col加了text-align: center，列本身宽度不一致的情况下，视觉上就会出现内容和标题不对齐的情况。

修复方法：给所有.col添加flex: 1属性，让每列均分容器的宽度，这样文字居中后就能和对应列标题完美对齐：

.responsive-table .col {
  flex: 1; /* 新增：让每列均分宽度 */
  text-align: center;
}

2. 媒体查询断点设置错误 #

你写的@media all and (max-width: 100%)这个条件是无效的——100%是相对于父容器的宽度，意味着这个媒体查询永远会生效，导致移动端的布局样式一直覆盖桌面端样式，这也会打乱原本的对齐逻辑。

修复方法：把断点改成具体的像素值（比如移动端常用的768px）：

@media all and (max-width: 768px) { /* 修改断点为具体像素 */
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
    display: flex;
    padding: 10px 0;
  }
}

额外检查点 #

确保你的headings和data数组的列数完全一致，Jinja2循环生成的列数不匹配也会导致对齐错乱。

修改后的完整CSS代码如下：

ul {
  padding: 0;
}
.responsive-table {
  width: 100%;
  table-layout : fixed;
}
.responsive-table li {
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 10px 30px;
  overflow: hidden;
}
.responsive-table .table-header {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 254, 5, 0.4);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.responsive-table .table-row {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 254, 5, 0.4);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  color: white;
}
.responsive-table .col {
  flex: 1; /* 新增 */
  text-align: center;
}
@media all and (max-width: 768px) { /* 修改断点 */
  .responsive-table .table-header {
    display: none;
  }
  .responsive-table li {
    display: block;
  }
  .responsive-table .col {
    flex-basis: 100%;
    display: flex;
    padding: 10px 0;
  }
}

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