news 2026/6/2 13:20:03

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
html,生成一个五行五列的表格,第三列边框是红色,其余列边框是黑色

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

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

实现思路

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

完整代码

<!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 列的左边框都是红色,在视觉上这两条线会连成一条完整的红色竖线。

预览

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/22 7:33:02

将文本文件如光场等导入VirtualLab Fusion

1 摘要VirtualLab Fusion 提供直观的数据导入工作流程&#xff0c;支持各种数据格式。用户可以导入 2D 数据阵列&#xff08;例如光场数据&#xff09;或等距和非等距 1D 阵列&#xff0c;例如特定材料的色散曲线。此用例引入了一种工具&#xff0c;使用户能够从任何类型的文本…

作者头像 李华
网站建设 2026/5/23 22:11:34

Java springboot基于Android的环境保护生活垃圾分类系统(源码+文档+运行视频+讲解视频)

文章目录 系列文章目录前言一、开发介绍二、详细视频演示三、项目部分实现截图 四、uniapp介绍 五、系统测试 六、代码参考 源码获取 目的 随着环保意识的提升&#xff0c;生活垃圾分类成为城市管理的重要环节。本系统采用Java Spring Boot框架构建后端服务&#xff0c;结合…

作者头像 李华