如何为HTML表格中的行添加边框？附现有代码求助

嘿，我来帮你搞定这个表格行边框的问题～ 你当前的代码里给<tr>加边框没生效，主要是因为表格默认的border-collapse属性是separate，这种情况下<tr>的边框不会直接显示出来，浏览器只会渲染单元格（<td>/<th>）的边框。下面给你几种可行的解决方案：

方案1：使用border-collapse: collapse合并边框 #

这是最常用的方法，设置表格的border-collapse为collapse后，单元格的边框会合并，此时给<tr>添加的边框就能正常显示了。

修改后的CSS代码：

.table_view_el {
  border: 1px solid #000;
  border-collapse: collapse; /* 关键属性，让边框合并 */
}
.table_view_el tr {
  border-bottom: 1px solid #000; /* 给每行添加底部边框 */
}
/* 可选：给表头行设置差异化样式 */
.table_view_el tr:first-child {
  border-bottom: 2px solid red;
}

对应的HTML可以去掉零散的行内样式，保持代码整洁：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
    <tbody>
      <tr>
        <th>Party</th>
        <th>Lead Seats</th>
        <th>Win Seats</th>
        <th>Total Seats</th>
      </tr>
      <tr>
        <td>INC</td>
        <td>0</td>
        <td>120</td>
        <td>120</td>
      </tr>
      <tr>
        <td>BJP</td>
        <td>0</td>
        <td>50</td>
        <td>50</td>
      </tr>
      <tr>
        <td>JD(S)</td>
        <td>0</td>
        <td>37</td>
        <td>37</td>
      </tr>
      <tr>
        <td>OTH</td>
        <td>0</td>
        <td>15</td>
        <td>15</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

方案2：给单元格添加边框（不合并边框） #

如果你不想合并表格边框，可以直接给每个<td>和<th>添加底部边框，视觉上也能实现“行边框”的效果：

.table_view_el {
  border: 1px solid #000;
}
.table_view_el td, .table_view_el th {
  border-bottom: 1px solid #000;
  padding: 8px; /* 可选：添加内边距让内容更美观 */
}
/* 去掉最后一行单元格的底部边框，避免和表格外边框重复 */
.table_view_el tr:last-child td {
  border-bottom: none;
}

补充说明 #

你代码里第一个<tr>的行内样式border-bottom: 1px solid red能生效，是因为行内样式的优先级高于外部CSS，但这种零散的写法不利于维护，建议统一用外部CSS管理样式哦～

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