news 2026/4/20 17:21:26

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/4/18 8:44:03

小程序毕设选题推荐:基于php+微信小程序的学习交流平台基于php的微信小程序的学习交流平台设计开发【附源码、mysql、文档、调试+代码讲解+全bao等】

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

作者头像 李华
网站建设 2026/4/17 21:35:00

SSTF中脉冲前倾的仿真

1 摘要 在材料加工、生物学和医学等各个学科中&#xff0c;将大部分场能量集中在一个单一点上非常重要。实现这一目标的一个有前途的程序是“同时空间和时间聚焦”&#xff08;SSTF&#xff09;&#xff0c;其中光通过展宽装置在光谱上展宽&#xff0c;然后用透镜聚焦以获得在…

作者头像 李华
网站建设 2026/4/18 8:04:02

PostIn实战系列 - 使用Mock尽早满足前后端接口开发需求

PostIn是一款开源免费的接口管理工具&#xff0c;包含项目管理、接口调试、接口文档设计、接口数据MOCK等模块&#xff0c;支持免登陆本地接口调试&#xff0c;同时可以对项目进行灵活的成员权限、消息通知管理等。本文将介绍如何配置并使用MOCK虚拟数据。1、添加MOCKPostIn内置…

作者头像 李华
网站建设 2026/4/18 9:59:47

2025年西南石油大学计算机考研复试机试真题(附 AC 代码 + 解题思路)

2025年西南石油大学计算机考研复试机试真题 2025年西南石油大学计算机考研复试上机真题 历年西南石油大学计算机考研复试上机真题 历年西南石油大学计算机考研复试机试真题 更多学校题目开源地址&#xff1a;https://gitcode.com/verticallimit1/noobdream N 诺 DreamJudg…

作者头像 李华
网站建设 2026/4/18 12:10:04

信息泄露思路(js文件包含json路径)

正文 在做测试的目标时,一定要搜索前端 JavaScript 文件里出现的“.json”路径,尤其是 /assets/mock/、/test/、/fixtures/ 等目录,因为开发或测试人员可能遗留了真实测试数据文件,其中可能包含 PII(个人隐私信息)、API 密钥、Token、内部接口结构等敏感信息。 举个例子…

作者头像 李华