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一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python处理PHP数组文本文件实例
2014/09/18 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python GUI计算器的实现
2020/10/09 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
毕业生的自我评价范文
2013/12/31 职场文书
自我鉴定标准格式
2014/03/19 职场文书
销售顾问工作计划书
2014/09/15 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
垂直极限观后感
2015/06/08 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
小学班长竞选稿
2015/11/20 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL