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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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 mssql 数据库分页SQL语句
2008/12/16 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
如何在PHP中生成随机数
2020/06/04 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
pandas DataFrame数据转为list的方法
2018/04/11 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
社区居务公开实施方案
2014/03/27 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
营销学习心得体会
2014/09/12 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
三方股东合作协议书
2014/10/28 职场文书
导游词之张家口
2019/12/13 职场文书