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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
php自定义session示例分享
2014/04/22 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue router demo详解
2017/10/13 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python标准日志模块logging的使用方法
2013/11/01 Python
python计数排序和基数排序算法实例
2014/04/25 Python
python实现2048小游戏
2015/03/30 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
销售人员自我评价
2014/02/01 职场文书
年终考核实施方案
2014/05/26 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
小学运动会加油词
2015/07/18 职场文书
2015年库房管理工作总结
2015/10/14 职场文书