当前位置： 首页 > news >正文

【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )

news 文章来源：https://blog.csdn.net/han1202012/article/details/129589862 2025/1/12 16:04:15

文章目录

  • 一、设置表格细线边框
    • 1、表格示例
    • 2、合并相邻边框
    • 3、完整代码示例





一、设置表格细线边框



1、表格示例


给定一个 HTML 结构中的表格 , 默认样式如下 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>设置表格细线边框</title><base target="_blank"/>
</head>
<body><!-- 表格标签 --><table width="400" align="center"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td><td>16</td></tr></table>
</body>
</html>

显示效果 :

在这里插入图片描述


2、合并相邻边框


为 table 设置边框 :

		table {border: 1px solid blue;}

显示效果 :
在这里插入图片描述
上述效果只有表格的边框 , 内部的单元格的边框没有设置 ,

为 表头单元格 th 和 普通单元格 td 设置边框 ;

		table, th, td {border: 1px solid blue;}

设置完上述样式后 , 表格显示如下 :

在这里插入图片描述

上述 单元格 与 单元格 之间 的边框 , 单元格 与 表格 之间 的边框 , 出现了重叠 , 每个重叠处都有 两条线 ;

设置

border-collapse: collapse;

CSS 样式 , 可以 将 相邻的边框 合并在一起 , 合并边框后的效果 :
在这里插入图片描述


3、完整代码示例


完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>设置表格细线边框</title><base target="_blank"/><style>table, th, td {border: 1px solid blue;/* 相邻边框合并在一起 */border-collapse: collapse;}</style>
</head>
<body><!-- 表格标签 --><table width="400" align="center"><!-- 表格标题标签 --><caption>表格标题</caption><!-- 表格行标签 --><tr><!-- 表格表头单元格标签 --><th>姓名</th><th>年龄</th></tr><tr><!-- 表格普通单元格标签 --><td>Tom</td><td>18</td></tr><tr><!-- 表格普通单元格标签 --><td>Jerry</td><td>16</td></tr></table>
</body>
</html>

显示效果 :

在这里插入图片描述

相关文章：

【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )

文章目录一、设置表格细线边框1、表格示例2、合并相邻边框3、完整代码示例一、设置表格细线边框 1、表格示例 给定一个 HTML 结构中的表格 , 默认样式如下 : <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8" />…...

编程日记 2023/5/13 7:36:12

TensorRT量化工具pytorch_quantization代码解析(一）

量化工具箱pytorch_quantization 通过提供一个方便的 PyTorch 库来补充 TensorRT &#xff0c;该库有助于生成可优化的 QAT 模型。该工具包提供了一个 API 来自动或手动为 QAT 或 PTQ 准备模型。 API 的核心是 TensorQuantizer 模块&#xff0c;它可以量化、伪量化或收集张量的…...

编程日记 2023/3/16 22:06:29

【Kubernetes】第二十七篇 - 布署前端项（下）

一&#xff0c;前言 上一篇&#xff0c;介绍了前端项目的部署&#xff1a;项目的创建和 jenkins 配置&#xff1b; 本篇&#xff0c;创建 Deployment、Service&#xff0c;完成前端项目的部署&#xff1b; 二&#xff0c;创建 Deployment 创建 Deployment 配置文件&#xff…...

编程日记 2023/3/16 22:01:26

【MFC】两个ListBox控件数据交互

一.控件ID名称 界面如图下所示&#xff1a; 候选数据列表的ID为&#xff1a; 已选数据列表的ID为&#xff1a; 二.数据添加 可以使用以下代码往框中添加数据&#xff1a; ((CListBox *)GetDlgItem(IDC_LIST_TO_CHO))->AddString("测试数据"); 显示效果如下&#…...

编程日记 2023/3/16 21:56:24

sklearn库学习--SelectKBest 、f_regression

目录 一、SelectKBest 介绍、代码使用 介绍&#xff1a; 代码使用&#xff1a; 二、评分函数 【1】f_regression&#xff1a; &#xff08;1&#xff09;介绍&#xff1a; &#xff08;2&#xff09;F值和相关系数 【2】除了f_regression函数&#xff0c;还有一些适用于…...

编程日记 2023/3/16 21:51:23

蓝桥杯刷题第十三天

第一题&#xff1a;特殊日期问题描述对于一个日期&#xff0c;我们可以计算出年份的各个数位上的数字之和&#xff0c;也可以分别计算月和日的各位数字之和。请问从 1900 年 11 月 1 日至 9999 年 12 月 31 日&#xff0c;总共有多少天&#xff0c;年份的数位数字之和等于月的数…...

编程日记 2023/3/16 21:46:21

CPU 和带宽之间的时空权衡

在 从一道面试题看 TCP 的吞吐极限 一文的开始&#xff0c;我提到在环形域上两个数字比较大小的前提是在同一个半圆内&#xff0c;进而得到滑动窗口最大值被限定在一个环形域的一半。 现在来看更为基本的问题。如果序列号只有 2bit&#xff0c;甚至仅有 1bit&#xff0c;保序传…...

编程日记 2023/3/16 21:41:20

ES+Redis+MySQL，这个高可用架构设计太顶了！

一、背景 会员系统是一种基础系统&#xff0c;跟公司所有业务线的下单主流程密切相关。如果会员系统出故障&#xff0c;会导致用户无法下单&#xff0c;影响范围是全公司所有业务线。所以&#xff0c;会员系统必须保证高性能、高可用&#xff0c;提供稳定、高效的基础服务。 …...

编程日记 2023/3/16 21:36:18

【Maven】Maven的常用命令

目录 一、Maven的常用命令 1、compile 编译命令 2、test 测试命令 3 、clean 清理命令 4、package 打包命令 5、 install 安装命令 6、Maven 指令的生命周期 二、maven 的概念模型 &#x1f49f; 创作不易&#xff0c;不妨点赞&#x1f49a;评论❤️收藏&#x1f499;一…...

编程日记 2023/3/16 21:31:17

python的循环结构

python中有for循环和while循环两种形式。 1. for 循环 可以用for循环来遍历不同类型的对象&#xff0c;如数组、列表、元组、字典、集合或字符串&#xff0c;并对每个元素执行一段代码。 1.1 数组的for循环 用for循环遍历一个数组&#xff0c;并打印出每个元素&#xff1a;…...

编程日记 2023/3/16 21:26:15

五种Python中字典的高级用法

1. 引言 Python中的字典是一种非常有用的数据结构&#xff0c;它允许大家存储键值对。通常来说&#xff0c;字典灵活、高效且易于使用&#xff0c;是Python中最常用的数据结构之一。字典通常被用于统计频率、映射值等任务&#xff0c;但在Python中使用字典也可以达到许多意想不…...

编程日记 2023/5/21 16:57:30

[蓝桥杯单片机]——八到十一届初赛决赛客观题

第八届初赛 一、填空题 采用外部12MHz晶振&#xff0c;经过系统12分频时定时器获得最大定时长度&#xff0c;此时定时器定时脉冲为1MHz&#xff0c;周期为1s&#xff0c;而定时器计时均为16位加法计数器&#xff0c;即计时长度为。 二、 选择题 ①带阻滤波器是指能通过大多数频…...

编程日记 2023/3/16 21:16:13

多线程(初阶)

文章目录一.初始线程(Thread)1.1.线程的概念1.2.线程的优势1.2.1.线程比进程更轻量1.2.2.并发编程1.3.线程和进程的区别二.Thread类方法2.1. java 中创建线程的方法2.1.1. 继承Thread,重写run2.1.2. 实现Ruuable接口2.1.3. 使用匿名内部类,继承Thread2.1.4.使用匿名内部类,实现…...

编程日记 2023/3/16 21:11:11

【Vue从入门到进阶】Node.js安装与配置

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端&#xff0c;欢迎大家一起来交流学习&#x1f3c6; &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f525;系列专栏&#xff1a;Vue从入门到进阶 &#x1f4ac;个人格言&#xff1a;但行好事&…...

编程日记 2023/3/16 21:06:09

python 正则使用详解

python 正则使用详解什么是正则在 python 中使用正则一些正则的定义python 正则的方法match 从字符串开头匹配正则返回的结果分析&#xff08;重要&#xff09;fullmatch 严格匹配整个字符串search 任意位置开始匹配sub 替换匹配内容subn 以元组方式返回替换结果split 正则切割…...

编程日记 2023/3/16 21:01:08

一个深度学习项目需要什么

DataLoader1.数据预处理在将数据提供给模型之前&#xff0c;DataLoader需要对数据进行预处理。预处理可以包括数据增强、归一化、裁剪、缩放等操作。这些操作可以提高模型的性能和准确度。在处理点云数据时&#xff0c;可以通过最远点下采样到固定的点数。2.读取标签文件我 1 2…...

编程日记 2023/3/16 20:56:06

【Java进阶篇】—— 常用类和基础API

一、String类 1.1 String的特性 java.lang.String 类代表字符串&#xff0c;由final关键字修饰&#xff0c;在赋值后不能改变&#xff08;常量&#xff09;&#xff0c;不能继承String类String 对象的字符内容是存储在一个字符数组 value[]中的 我们来看一下String在JDK8中的…...

编程日记 2023/3/16 20:51:04

手敲Mybatis(六)-反射工具天花板

历时漫长的岁月&#xff0c;终于鼓起勇气继续研究Mybatis的反射工具类们&#xff0c;简直就是把反射玩出花&#xff0c;但是理解起来还是很有难度的&#xff0c;涉及的内容代码也颇多&#xff0c;所以花费时间也比较浩大&#xff0c;不过当了解套路每个类的功能也好&#xff0c…...

编程日记 2023/3/16 20:46:01

内含18禁~~关于自学\跳槽\转行做网络安全行业的一些建议

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;在于他所拥有的。所以可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防。…...

编程日记 2023/3/16 20:41:00

春分策划×运维老王主讲：CMDB数据运营精准化公开课启动报名啦！

『CMDB数据运营精准化』 公开直播课 要来了&#xff01; &#x1f446;扫描海报二维码&#xff0c;预约直播 CMDB似乎是运维中永恒的老话题。 提到CMDB很多人都是又爱又恨&#xff0c;爱的是它给我们提供了一个美好的未来&#xff0c;有了CMDB我们可以解决诸多运维中的难题。…...

编程日记 2023/3/16 20:35:58

制作INCA和CANape通用的A2L

文章目录 前言制作A2LA2ML定义MOD_COMMON定义MOD_PAR定义MEMORY_SEGMENTTransportLayer定义PROTOCOL_LAYERDAQ总结前言 由于INCA和CANape是两个不同的公司对XCP协议的实现，所以A2L中也会有不一样的地方，但是在标定时若每次都用两个A2L，是非常不方便的，本文介绍如何设计A2L…...

编程日记 2023/3/16 20:30:56

Python人脸识别

#头文件&#xff1a;import cv2 as cvimport numpy as npimport osfrom PIL import Imageimport xlsxwriterimport psutilimport time#人脸录入def get_image_name(name):name_map {f.split(.)[1]:int(f.split(.)[0]) for f in os.listdir("./picture")}if not name…...

编程日记 2023/3/16 20:25:55

我用Python写了一个下载网站所有内容的软件，可见即可下，室友表示非常好用

Python 写一个下载网站内容的GUI工具&#xff0c;所有内容都能下载&#xff0c;真的太方便了&#xff01;前言本次要实现的功能效果展示代码实战获取数据GUI部分最后前言 哈喽大家好&#xff0c;我是轻松。 今天我们分享一个用Python写下载视频弹幕评论的代码。 之前自游写了…...

编程日记 2023/3/16 20:20:54

【M365运维】扩充OneDrive存储空间

【问题】E3,E5等订阅许可下&#xff0c;默认的OneDrive存储空间为 1TB&#xff0c;满了之后该如何扩充&#xff1f;【解决】1.运行Powershell2. 链接到Sharepoint Online: Connect-SPOSerivce -url https://<这里通常是公司名>-admin.sharepoint.com3. 定义三个扩充空间时…...

编程日记 2023/3/16 20:15:52

hashcat（爆破工具，支持GPU，精）

目录 简介 分类 参数 -m hash的类型 -a 攻击方式 掩码 使用方法 字典破解 简介 虽然John the R...

编程日记 2023/3/16 20:10:50

【机器学习】什么是监督学习、半监督学习、无监督学习、自监督学习以及弱监督学习

监督学习&#xff08;Supervised Learning&#xff09;&#xff1a;利用大量的标注数据来训练模型&#xff0c;模型最终学习到输入与输出标签之间的相关性。半监督学习&#xff08;Semi- supervised Learning&#xff09;&#xff1a;利用少量有标签数据和大量无标签数据来训练…...

编程日记 2023/3/16 20:05:48

HashiCorp packer 制作AWS AMI镜像示例

准备工作 验证AWS 可以先手动启动一个EC2实例验证自己创建的VPC, subnet, internet gateway 和routetable等, 确保实例创建后不会出现连接不上的情况. 可以按照下面的链接配置避免连接超时 https://docs.aws.amazon.com/zh_cn/AWSEC2/latest/UserGuide/TroubleshootingInstan…...

编程日记 2023/3/16 20:00:46

【java基础】根据泛型动态构造jackson的TypeReference（json反序列化为带泛型的类的对象）

根据泛型动态构造jackson的TypeReference引出问题使用TypeReference反序列化的例子根据泛型动态构造TypeReference带泛型的类如何表示&#xff1f;完成HttpClient的实现引出问题 将json字符串反序列化为带泛型的类的对象怎么操作&#xff1f;怎么根据TypeReference<List<…...

编程日记 2023/3/16 19:55:42

为什么VMware会给我多创建了两个网络呢？Windows和Linux为什么可以彼此ping的通呢

为什么VMware会给我多创建了两个网络呢&#xff1f;Windows和Linux为什么可以彼此ping的通呢 文章目录为什么VMware会给我多创建了两个网络呢&#xff1f;Windows和Linux为什么可以彼此ping的通呢桥接模式ANT模式&#xff08;VMnet8&#xff09;仅主机模式&#xff08;VMnet1&a…...

编程日记 2023/3/16 19:50:40

服务器带宽承载多少人同时访问计算方法-浏览器中查看当前网页所有资源数据大小-客服系统高并发承载人数【唯一客服】...

浏览器中怎么查看当前网页所有资源的数据大小 在开发者工具的“网络”选项卡中&#xff0c;可以看到所有请求和响应的详细信息&#xff0c;包括每个资源的大小。如果需要查看网页所有资源的总大小&#xff0c;可以按照以下步骤操作&#xff1a; 打开要查看的网页。打开开发者工…...

编程日记 2023/3/16 19:45:38

织梦做的网站如何放在网上/武汉百度搜索优化

每个寄存器在理论上都可以从RAM读取信息或将信息写入RAM中&#xff0c;ALU算数逻辑单元&#xff0c;它很容易4个字节上进行加法减法移位操作。...

编程日记 2025/1/12 15:11:36

wordpress 地址插件/seopeixun

1、为什么使用em em也是css中的一种单位&#xff0c;和px类似。很多人会疑惑为什么有了px之后还要使用em&#xff0c;而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局&#xff0c;下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang"…...

编程日记 2025/1/12 10:48:01

网页设计图片大小怎么改/有必要买优化大师会员吗

Hive作为大数据领域常用的数据仓库组件&#xff0c;在平时设计和查询时要特别注意效率。影响Hive效率的几乎从不是数据量过大&#xff0c;而是数据倾斜、数据冗余、job或I/O过多、MapReduce分配不合理等等。对Hive的调优既包含对HiveQL语句本身的优化&#xff0c;也包含Hive配置…...

编程日记 2025/1/12 6:43:45

应届生招聘去哪个网站/北京官网seo

文章目录1.处理客户端删除状态请求1.1 InstanceResource.deleteStatusUpdate()1.2 PeerAwareInstanceRegistryImpl.deleteStatusOverride()1.3 AbstractInstanceRegistry.deleteStatusOverride()1.4 PeerAwareInstanceRegistryImpl.replicateToPeers()1.处理客户端删除状态请求…...

编程日记 2025/1/12 6:03:00

淮安网站优化/东莞做网站哪个公司好

redis-cli - Command-line client to redis-server 2.1. Pub/Sub 订阅与发布 redis 提供基本的MQ 功能&#xff0c;下面我们做一个演示 开启第一个终端窗口&#xff0c;订阅first second $ redis-cli redis 127.0.0.1:6379> SUBSCRIBE first second Reading messages... (pr…...

编程日记 2025/1/12 5:00:58

国外网站怎么打开/高端网站建设公司排名

4其他需要注意的事项如果您在清单文件AndroidManifest.xml中&#xff0c;有那种以包名开头命名的那种。因为如果包名都改了&#xff0c;有些也需要动态的改变。可以用${applicationId}代替。在打包的时候&#xff0c;会自动替换成当前包名。比如&#xff0c;类似下配置&#xf…...

编程日记 2025/1/12 3:52:17