html,生成一个五行五列的表格,第三列边框是红色,其余列边框是黑色
要实现“第三列所有边框为红色”且“第二列右边框为红色”的效果,最稳妥的方式是分别对这两列进行独立设置。这样不仅能确保第三列的左边框显示为红色,还能让第二列与第三列之间的分隔线(即第二列的右边框)也变为红色,从而达到视觉上的统一。
实现思路
- 第三列设置:直接将第三列所有单元格的边框全部设为红色。
- 第二列设置:单独修改第二列单元格的右边框为红色。
完整代码
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="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 列的左边框都是红色,在视觉上这两条线会连成一条完整的红色竖线。