table 设置合并边框

最新推荐文章于 2024-08-13 11:49:05 发布
最新推荐文章于 2024-08-13 11:49:05 发布
阅读量1w 收藏 2
点赞数 1
分类专栏： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36947128/article/details/81232776
版权
html 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css3
9 篇文章 0 订阅
订阅专栏

先来看看原始表格

<table  border="1 	">
			<thead>
				<tr >
					<th>网站</th>
					<th>资源</th>
					<th>url</th>
					<th>排名</th>
				</tr>
				<tbody>
					<tr >
					<td>淘宝网</td>
					<td>大</td>
					<td>www.taobao.com</td>
					<td>25</td>
					</tr>
					<tr >
					<td rowspan="2">京东</td>
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
						<td colspan="4" style="text-align: right;">小小小</td>
					</tr>
				</tbody>
			</thead>
		</table>

效果图

其中 rowspan 属性规定单元格可横跨的行数。设置为rowspan:2 表示占2个单元格.colspan 属性规定单元格可横跨的列数,设置为colospan:4 就可以占用满列。大家看现在的table的边框和内容是有边距的，如果想消除边距，并且使border变细，可以使用

border-collapse:collapse属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			table{
		    border-collapse:collapse
			
			}
			
		</style>
	</head>
	<body>
		<table  border="1 	">
			<thead>
				<tr >
					<th>网站</th>
					<th>资源</th>
					<th>url</th>
					<th>排名</th>
				</tr>
				<tbody>
					<tr >
					<td>淘宝网</td>
					<td>大</td>
					<td>www.taobao.com</td>
					<td>25</td>
					</tr>
					<tr >
					<td rowspan="2">京东</td>
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
					<td>大</td>
					<td>www.jingdong.com</td>
					<td>25</td>
					
					</tr>
					<tr >
						<td colspan="4" style="text-align: right;">小小小</td>
					</tr>
				</tbody>
			</thead>
		</table>
	</body>
</html>

这样就好了

爱吃排骨
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于表格table嵌套,边框合并问题的解决方法
09-28
本篇文章将深入探讨如何解决表格table嵌套以及边框合并带来的问题。 首先，让我们了解什么是表格嵌套。表格嵌套是指在一个表格（外层表格）的某个单元格（Cell）中插入另一个表格（内层表格）。这种设计方式可以...
【css】css设置表格样式-边框线合并
qq_22744093的博客
08-02 2544
渲染出来的效果不好看，边框线存在两条，现在需要将它们合并，添加 border-collapse: collapse。
table边框合并问题
qq_48222936的博客
08-11 4306
box-sizing:border-box：盒子不会被padding和border撑大，按照width和height实际大小显示。则会合并表格中所有的td边框，实现边框1+1=1的效果。所以我给table和td（只有这两个添加了样式）添加了box-sizing:border-box样式。我给table是800px宽度但是却出现了小数，所以我猜测肯定是边框撑大了盒子造成合并的边框变粗。这里最后一行的top边框会重叠，并且加粗，强迫症会非常难受也不美观。这样一来就解决了边框合并变粗(强迫症)问题。...
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
weixin_64294248的博客
07-12 1241
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
table表格tr、td、合并、间距、边框合并、设置边距 代码
qq_51055690的博客
06-01 9018
table表格设置边距 , table设置边框合并 , table设置外边距内边距 table表格实用代码
1、4表格细线边框合并
qq_62865634的博客
10-08 1109
本文仅仅简单介绍了表格合并后边框会1+1=2，我们要让边框变为1+1=1，那么就加border-collapse：“collapse”
css怎么设置table表格的边框为单线边框？（代码详解）
热门推荐
沈行的博客
08-14 5万+
table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先我们来看看给table表格添加边框后，它的默认效果： 1 2 3 4 5 6 table,table td{ border...
用CSS设置表格Table的细边框的比较好用的方法
09-25
它通过设置 `border=0` 和 `cellspacing=1`，然后为表格设置背景色，使其与细边框颜色相同，同时将所有单元格(`td`)的背景色设置为白色。这样，看似没有边框的表格实际上通过背景色的差异显示出了1像素的细线，形成...
table嵌套table边框样式
02-21
本篇将详细介绍如何通过CSS来控制嵌套表格的边框，以及涉及`div嵌套table`时的外边框设置。 首先，我们需要理解表格的基本结构。一个HTML表格由`<table>`元素开启，包含`<tr>`（行）元素，`<td>`（单元格）或`<th>`...
使用css如何操作Table没有外边框只有内边框
09-25
若要将最后一行或单元格的边框设置为无，可以在相应的tr或td元素上加上lastrow或lastCol类。 通过上述步骤，你可以实现一个只有内边框的表格布局，适用于需要简洁展示数据的网页设计中。需要注意的是，为了保证代码...
一个属性border-collapse解决Table的边框问题
09-25
为了应对这一挑战，开发人员和网页设计师们通常会采用一些技巧，比如将表格的边框设置为0，并为每个单元格单独设置边框，以此来模拟一个整体的边框效果。这种方法虽然可以在一定程度上解决问题，但这样做往往会增加...
CSS中为表格（table）设置合并边框模型（合并边框）
qq_43435403的博客
10-10 3093
CSS中为表格（table）设置合并边框模型（合并边框）的方法： table { border-collapse: collapse; }
html5合并单元格边框线,table边框表头单元格空间合并等设置
weixin_39606911的博客
06-10 833
表格由标签来定义,每个表格均有若干行(由标签定义)，每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。1 HTML 表格的基本结构：2 …>：定义表格3 th：定义表格的标题栏(文字加粗)4 tr：定义表格的行5 td>：定义表格的列HTML 表格和边框属性,如果不...
CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form
bqiuer的博客
09-25 5344
HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。
【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-02 957
TCP的坚固与前端的智慧相遇，让网络的不确定变得可控。你是否经历过更巧妙的重连策略，或是棘手的断连难题？欢迎在评论区分享你的故事，一起加固这座网络的桥，让前端之旅更加稳健。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，
html 关于table合并外边框以及自动滚动问题汇总
最新发布
lfl18326162160的博客
08-13 275
固定高度显示上下滑动。
html中table 的边框合并 cellspacing
宝码香车的博客
05-30 398
【代码】html中table 的边框合并 cellspacing。
HTML画表格table边线重合问题（border-collapse: collapse；）
黄彪博客
12-03 8032
文章目录一、参考问题描述解决思路一、使用DIV + CSS二、使用table border-collapse案例 一、参考 CSS border-collapse 属性 问题描述 工作中，需要画一个表格，需要显示border,于是使用DIV+CSS的方式，如果设置“border: 1px solid red”的样式，结果div重合的地方就会出现2倍的边线，与设计不符 解决思路 一、使用DIV + CSS 如果一定要使用DIV+CSS, 则需要区分第一行 、 最后一行 、第一列、最后一列 、中间表格的
重学前端 样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列 ）（第四天）
PBitW的博客
07-20 1253
样式css 表格 重点 border-spacing border-collapse（是否合并边框模型） 重叠加粗如何解决？ empty-cells（不包含任何内容的表单元格如何表示（仅用于“边框分离”模式）） box-sizing（用户应该如何计算一个元素的总宽度和总高度） 详解 table-layout （用来显示表格 单元格、行、列的算法规则） rowspan和colspan（合并行、列）
table 怎样合并边框
06-06
在HTML中，可以使用CSS的`border-collapse`属性来合并表格边框，具体操作如下： 1. 在CSS中设置`border-collapse: collapse;`，将表格边框合并为一个单一边框。 2. 在表格的`<td>`或`<th>`标签中设置`border: none;`，将单元格边框设置为空，避免重复显示边框。 下面是一个示例代码，将表格边框合并为一个单一边框： ```html <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: none; border-bottom: 1px solid #ddd; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> </table> </body> </html> ``` 在上面的代码中，设置了`border-collapse: collapse;`以及`border: none;`来合并表格边框。同时，通过设置`border-bottom: 1px solid #ddd;`来显示单元格底部边框，使表格更加美观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值