news 2026/3/29 18:17:30

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/3/27 4:50:49

FastGPT + BrillAI:从问答到 AI 助手,低成本打造企业级 AI 方案

在人工智能技术飞速发展的今天&#xff0c;大型语言模型正以前所未有的速度改变着我们的生活和工作方式。FastGPT作为一款基于先进AI技术的智能助手&#xff0c;在海内外技术社区及媒体上收获了诸多好评&#xff0c;许多开发者/用户称其为“易用且功能强大”的大模型落地方案&a…

作者头像 李华
网站建设 2026/3/27 3:55:49

本地AI知识库问答开源技术实现(一)--安装和准备

自从 DeepSeek-R1 火出圈以来&#xff0c;很多个人和公司开始尝试本地化部署&#xff0c;以解决原来一些内部资料安全和隐私问题&#xff1b;我们也尝试在本地进行相关部署&#xff0c;以验证本地知识库是否可行&#xff0c;最终达到以下目的&#xff1a; 所有知识库内容不通过…

作者头像 李华
网站建设 2026/3/26 21:40:10

论 AI Skills 分布式发展的必然性:从单体智能到“云端大脑”的跃迁

在人工智能从“对话式模型”向“原生智能体&#xff08;Agentic AI&#xff09;”进化的进程中&#xff0c;我们正处于一个类似于互联网从单机软件向分布式架构转型的关键拐点。这一转型的核心&#xff0c;在于 AI Skills 的崛起及其分布式发展的必然。 一、 什么是 AI Skills…

作者头像 李华
网站建设 2026/3/27 15:57:05

AI算法算力平台EasyGBS:国标GB28181视频监控与智能管理解决方案

在数字化转型加速推进的背景下&#xff0c;视频监控已成为各行业安全管理、应急处置、运营优化的核心支撑手段。国标GB28181算法算力平台EasyGBS&#xff0c;凭借全协议兼容接入、全流程协同调度等核心能力&#xff0c;构建了一体化视频监控解决方案&#xff0c;广泛适配多样化…

作者头像 李华
网站建设 2026/3/27 20:49:50

内存寻址 = 硬盘寻址?

内存寻址 ≠ 硬盘寻址 —— 这是理解计算机系统性能与架构的核心分界。二者虽都涉及“地址”&#xff0c;但 物理机制、速度量级、抽象层级 完全不同。 一、核心区别&#xff1a;物理机制与速度 特性内存寻址&#xff08;RAM&#xff09;硬盘寻址&#xff08;HDD/SSD&#xff…

作者头像 李华
网站建设 2026/3/29 1:28:07

Java springboot基于Android的食品安全信息管理系统食品检测(源码+文档+运行视频+讲解视频)

文章目录 系列文章目录前言一、开发介绍二、详细视频演示三、项目部分实现截图 四、uniapp介绍 五、系统测试 六、代码参考 源码获取 目的 食品安全关乎公众健康&#xff0c;是社会关注的焦点。本系统基于Java Spring Boot框架与Android平台&#xff0c;实现了食品信息管理、…

作者头像 李华