html+css合并表格边框的示例代码


Posted in HTML / CSS onMarch 31, 2021

我们给table和td标签加边框时,默认使用双边框,像这样。

html+css合并表格边框的示例代码
 

如果我们希望合并table与td的边框,可以在table样式加设置border-collapse的属性值为collapse即可。如下图:
 

html+css合并表格边框的示例代码
 

再看效果:
 

html+css合并表格边框的示例代码
 

为了便于复制,这里给出代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid blue;/*表添加边框*/
            border-collapse: collapse;/*合并边框*/
        }
        td{
            border: 1px solid blue;/*单元格添加边框*/
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
</body>
</html>

到此这篇关于html+css合并表格边框的示例代码的文章就介绍到这了,更多相关html合并表格边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
z-index不起作用
Mar 31 #HTML / CSS
元素水平垂直居中的方式
Mar 31 #HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
简单实现一个手持弹幕功能+文字抖动特效
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
You might like
浅谈本地WAMP环境的搭建
2015/05/13 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
canvas时钟效果
2017/02/16 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python 类之间的参数传递方式
2019/12/20 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
django使用graphql的实例
2020/09/02 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
中间件分为哪几类
2012/03/14 面试题
酒店个人求职信范文
2014/01/25 职场文书
高校教师岗位职责
2014/03/18 职场文书
网络编辑岗位职责
2014/03/18 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
先进单位事迹材料
2014/12/25 职场文书
植物园观后感
2015/06/11 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
高考升学宴主持词
2019/06/21 职场文书