border-collapse 实例

最新推荐文章于 2022-04-07 19:55:53 发布
最新推荐文章于 2022-04-07 19:55:53 发布
阅读量132 收藏 1
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48519907/article/details/110293635
版权 
	<body>
		<table align="center" cellspacing="0">
			<thead>
				<tr>
					<th>排名</th>
					<th>关键词</th>
					<th>趋势</th>
					<th>进入搜索</th>
					<th>最近七日</th>
					<th>相关链接</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
					</td>
				</tr>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
					</td>
				</tr>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
						</td>
				</tr>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
					</td>
				</tr>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
					</td>
				</tr>
				<tr>
					<td>1</td>
					<td>鬼吹灯</td>
					<td><img src="images/01.png" height="20px"></td>
					<td>456</td>
					<td>123</td>
					<td>
						<a href="#">贴吧&nbsp;</a>
						<a href="#">图片&nbsp;</a>
						<a href="#">百科</a>
					</td>
			</tbody>
		</table>
	</body>

			<style>
			table {
				width: 500px;
				height: 249px;
			}

			th {
				height: 35px;
			}

			table,
			td,
			th {
				border: 2px solid black;
				border-collapse: collapse;
				/* 合并相邻的边框 */
				font-size: 14px;
				text-align: center;
			}
		</style>

效果:
不合并：
在这里插入图片描述
合并：
在这里插入图片描述

不知道叫什么呢123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS如何修改tr边框属性实例详解
01-19
因为表格中的tr并非单一的边框，这样便需要属性border-collapse，border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 实例：为表格设置合并边框模型： 复制代码...
CSS 学习笔记（二）
m0_60875396的博客
09-24 4294
本篇文章主要记录了 CSS 的部分进阶内容，包括 CSS 的三大特性、盒子模型、圆角边框、盒子阴影、浮动以及定位的相关代码、应用以及注意事项等，目的主要是为了帮助自己记录学习，同时也把文章分享出来，供大家参考学习。
CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）
运维玄德公
04-07 4030
1. 边框（border） 1.1 添加边框 示例（table 边框） 示例（th边框） 示例（td 边框） 1.2 折叠边框（border-collapse） 2. 高度和宽度（width/height） 示例（表头高度设置为百分比） 3. 对齐 3.1 水平对齐（text-align） 3.2 垂直对齐（vertical-align） 4. 表格填充（padding）...
border-collapse:collapse; 表示折叠边框
weixin_30905981的博客
05-17 1万+
名称：border-collapse分类：表格简述：设置行和单元格的边是否合并概述：border-collapse是设置表格的行<tr>或<td>之间是否留有距离的样式，<tr>与<td>之间的距离，在表格里可以通过border="xxx"与 cellspacing="xxx"来实现。换句话说，当border-collapse设置为collapse时...
每天CSS学习之border-collapse
dietisi8980的博客
08-20 738
border-collapse是CSS2的一个属性，其作用是折叠表格(table)的边框。collapse翻译过来又折叠的意思。 border-collapse有三个值： collapse:将表格和单元格的边框折叠； separate:分隔表格和单元格的边框，这是默认值； inherit:从父元素继承该属性。 实践一下： 1、分隔表格和单元格的边框，这是默认的： ...
CSS系列之表格边框 border-collapse
老__L的博客
01-25 7377
本文主要介绍CSS的border-collapse属性。表格边框 border-collapse
ZK布局实例
01-15
ECLIPSE+ZK布局实例: <?page title="玄门神数"?> <window title="" border="normal" width="100%" height="100%"> 玄门神数" border="normal" > ,100px"> 左上 <splitter id="s1" collapse="before"/...
less 实例 z.less
12-09
table { border-collapse:collapse; } body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff; } a { color:#666; text-decoration:none; } a:visited { color:#666; }...
js 表格拖拽效果实例代码 (IE only)
11-30
Table Test (I.E. Only) body { overflow: hidden; } .Shadow { color: #FC8331;...border-collapse: collapse; border-right: 1px solid #0000; border-top: 1px solid #0000; border-left: 1px solid #00
AJAX XML 实例
12-14
border-collapse: collapse; } th,td { padding: 5px; } 获取我收藏的 CD 实例解析 – loadXMLDoc() 函数 当用户点击上面的”获取我收藏的 CD”这个按钮，就会执行 loadXMLDoc() 函数。 loadXMLDoc() 函数创建 ...
CSS border-collapse 属性
10-30
CSS border-collapse 属性
html合并边框线,css中border-collapse属性设置表格边框线的方法
weixin_30781567的博客
06-24 5813
css中border-collapse属性设置表格边框线的方法发布时间：2020-08-31 11:41:02来源：亿速云阅读：99作者：小新这篇文章主要介绍css中border-collapse属性设置表格边框线的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先我们来了解一下css border-collapse属性是什么？它的作用。border-collapse ...
border-collapse:collapse 这个小妖精！
IME的博客
07-16 6417
第一次写博客，还有点小激动。个人最近一直做前端项目，对前端的热爱，与日俱增。各种学习停不下来，同时在项目中应用各种技能打怪。其乐无穷啊！感觉有好多东西必须和大家分享分享。于是就有想写的冲动。第一个被我选中的就是被我用了N遍的border-collapse:collapse;下面正经起来 。    相信第一次遇到这个小妖精。你会看到这样的解释：如果可能，边框会合并为一个单一的边框。what？请
border-collapse用法详细说明
JackSparrow952701的专栏
07-26 8411
名称：border-collapse分类：表格简述：设置行和单元格的边是否合并概述：border-collapse是设置表格的行或之间是否留有距离的样式，与之间的距离，在表格里可以通过border="xxx"与 cellspacing="xxx"来实现。换句话说，当border-collapse设置为collapse时，表格自身的border与cellspacing属性便没有作用了。
border-collapse的使用，属性值collapse可以使边框合并，默认值sparate边框分开
xingxinglinxi的博客
09-15 1491
border-collapse属性，属性值collapse可以使边框合并，默认值sparate边框分开 在表格中不加collapse，默认值是sparate： 添加border-collapse:collapse;边框合并： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid..
原生table的常用属性，border-collapse:collapse,separate,none;cellspacing="10"
tangcc的博客
01-07 2811
原生的table的常用属性： //有!DOCTYPE表格属性border-collapse才能兼容ie8。 代码如下 ： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;table 的常用属性&lt;/t
漂亮的表格样式(使用CSS样式表控制表格样式)
热门推荐
隔壁老王的博客
03-24 18万+
  依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。现在使用介绍使用CSS样式表来控制、美化表格的方法。 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
web前端学习（十八）——CSS3表格属性（table）的相关设置
胜天半子祁同伟
01-27 1万+
web前端学习（十八）——CSS3表格属性（table）的相关设置
解决表格边框不显示的问题
weixin_34250709的博客
01-22 1304
在 IE6 中，当表格单元格中的数据为空时，边框是不显示的，在IE8中是会显示的，怎样解决这个不兼容的问题呢。下面有一个例子，看如下代码，有两处不能显示，有一种解决办法是加个空格，可以解决但不是最理想的。其实只要在表格中加了一句代码就可以。 style="border-collapse: collapse" <table border="1" width="100%" id="table1...
<!DOCTYPE html> <html> <head> <title>学生列表</title> <style> table { border-collapse: collapse; border: 2px solid black; } th, td { border: 2px solid black; padding: 5px; } <×yle> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>学生列表</h2> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <!-- // TODO遍历学生列表 --> <tr v-for="(student,index) in students"> <td>{{student.name}}</td> <td>{{student.gender}}</td> <td>{{student.age}}</td> <td>{{student.phone}}</td> <td> <button @click:v-for="updateStudent">修改<^tton> </td> </tr> </tbody> </table> </div> <script> new Vue({ el: "#app", data: { students: [ { name: "张三", gender: "男", age: 18, phone: "13888888888" }, { name: "李四", gender: "女", age: 20, phone: "13999999999" }, { name: "王五", gender: "男", age: 22, phone: "13666666666" }, ], }, methods: { updateStudent(student) { Vue.set(student, "age", student.age + 1); // TODO使用 Vue.set 方法更新学生信息 }, }, }); </script> </body> <html>
最新发布
03-28
其中，table标签用于显示表格，border-collapse和border属性用于设置边框，th和td标签用于显示表头和表格数据，padding属性用于设置内边距。Vue.js框架通过引入vue.js文件实现数据绑定和遍历学生列表。代码中的v-for...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值