如何为HTML表格中的各数据集动态添加边框？

现有如下表格HTML代码，希望按Subject字段分组（Maths、English），为每组数据添加独立边框以区分不同数据集：

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>Subject</th>
      <th>Average Marks</th>
      <th>Name</th>
      <th>Marks Scored</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>Maths</td>
      <td>80</td>
      <td>Student 1</td>
      <td>90</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Maths</td>
      <td>80</td>
      <td>Student 2</td>
      <td>70</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Maths</td>
      <td>80</td>
      <td>Student 3</td>
      <td>80</td>
    </tr>
    <tr>
      <th>3</th>
      <td>English</td>
      <td>80</td>
      <td>Student 1</td>
      <td>90</td>
    </tr>
    <tr>
      <th>4</th>
      <td>English</td>
      <td>80</td>
      <td>Student 2</td>
      <td>70</td>
    </tr>
  </tbody>
</table>

效果说明 #

• 实际效果：表格仅外层有边框，分组数据无明显分隔
• 预期效果：每个Subject分组拥有独立的粗边框包裹，分组间边界清晰

实现方案 #

方案1：前端JavaScript+CSS动态标记分组

通过JS识别分组边界，为分组首尾行添加类名，再用CSS设置边框样式：

CSS样式

/* 合并表格边框，避免重复 */
.dataframe {
  border-collapse: collapse;
  width: 100%;
}
/* 基础单元格样式 */
.dataframe th, .dataframe td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: right;
}
/* 分组首行顶部粗边框 */
.group-start {
  border-top: 2px solid #000;
}
/* 分组末行底部粗边框 */
.group-end {
  border-bottom: 2px solid #000;
}
/* 表头顶部保持粗边框 */
.dataframe thead tr th {
  border-top: 2px solid #000;
}

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const rows = document.querySelectorAll('.dataframe tbody tr');
  let currentSubject = null;
  
  rows.forEach((row, index) => {
    const subjectCell = row.querySelector('td:first-child');
    if (!subjectCell) return;
    
    const subject = subjectCell.textContent.trim();
    // 检测分组切换
    if (subject !== currentSubject) {
      // 为上一组末行添加底部边框
      if (index > 0) {
        rows[index - 1].classList.add('group-end');
      }
      // 为当前组首行添加顶部边框
      row.classList.add('group-start');
      currentSubject = subject;
    }
    // 为最后一行添加底部边框
    if (index === rows.length - 1) {
      row.classList.add('group-end');
    }
  });
});

方案2：后端生成表格时直接添加样式（以Pandas为例）

如果表格是通过Pandas的to_html生成的，可以用Styler在导出时直接设置分组边框：

import pandas as pd

# 示例数据框
df = pd.DataFrame({
    'Subject': ['Maths', 'Maths', 'Maths', 'English', 'English'],
    'Average Marks': [80, 80, 80, 80, 80],
    'Name': ['Student 1', 'Student 2', 'Student 3', 'Student 1', 'Student 2'],
    'Marks Scored': [90, 70, 80, 90, 70]
})

def apply_group_borders(row):
    row_idx = row.name
    current_subject = df.loc[row_idx, 'Subject']
    # 判断是否为分组首行
    is_first_in_group = row_idx == 0 or df.loc[row_idx - 1, 'Subject'] != current_subject
    # 判断是否为分组末行
    is_last_in_group = row_idx == len(df)-1 or df.loc[row_idx + 1, 'Subject'] != current_subject
    
    styles = []
    if is_first_in_group:
        styles.append('border-top: 2px solid black;')
    if is_last_in_group:
        styles.append('border-bottom: 2px solid black;')
    # 为所有单元格应用样式
    return styles * len(row)

# 生成带样式的表格
styled_df = df.style.apply(apply_group_borders, axis=1)
# 导出为HTML文件
styled_df.to_html('grouped_table.html', border=1)

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