html，生成一个五行五列的表格，第三列边框是红色，其余列边框是黑色

html，生成一个五行五列的表格，第三列边框是红色，其余列边框是黑色

要实现"第三列所有边框为红色"且"第二列右边框为红色"的效果，最稳妥的方式是分别对这两列进行独立设置。这样不仅能确保第三列的左边框显示为红色，还能让第二列与第三列之间的分隔线（即第二列的右边框）也变为红色，从而达到视觉上的统一。

实现思路

1. 第三列设置：直接将第三列所有单元格的边框全部设为红色。
2. 第二列设置：单独修改第二列单元格的右边框为红色。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>指定列红色边框</title>
  <style>
    table {
      border-collapse: collapse; /* 合并边框 */
      width: 100%;
      font-family: Arial, sans-serif;
    }

    td, th {
      border: 1px solid black; /* 默认黑色边框 */
      padding: 12px;
      text-align: center;
    }

    /* 第一步：将第三列（索引3）的所有边框设为红色 */
    /* 这会覆盖掉该列左边原本可能存在的黑色边框 */
    tr td:nth-child(3),
    tr th:nth-child(3) {
      border: 1px solid red;
    }

    /* 第二步：将第二列（索引2）的右边框设为红色 */
    /* 这样第二列和第三列之间的线就是红色的了 */
    tr td:nth-child(2),
    tr th:nth-child(2) {
      border-right: 1px solid red;
    }
  </style>
</head>
<body>

  <table>
    <tr>
      <td>1,1</td>
      <td>1,2</td>
      <td>1,3</td>
      <td>1,4</td>
      <td>1,5</td>
    </tr>
    <tr>
      <td>2,1</td>
      <td>2,2</td>
      <td>2,3</td>
      <td>2,4</td>
      <td>2,5</td>
    </tr>
    <tr>
      <td>3,1</td>
      <td>3,2</td>
      <td>3,3</td>
      <td>3,4</td>
      <td>3,5</td>
    </tr>
    <tr>
      <td>4,1</td>
      <td>4,2</td>
      <td>4,3</td>
      <td>4,4</td>
      <td>4,5</td>
    </tr>
    <tr>
      <td>5,1</td>
      <td>5,2</td>
      <td>5,3</td>
      <td>5,4</td>
      <td>5,5</td>
    </tr>
  </table>

</body>
</html>

效果说明

• 第 2 列 ：只有右边框是红色的，其余三边保持黑色。
• 第 3 列 ：上、下、左、右四条边框全部是红色。
• 视觉连接：由于第 2 列的右边框和第 3 列的左边框都是红色，在视觉上这两条线会连成一条完整的红色竖线。

预览