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实现全景图特效示例代码
Mar 26 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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
虫族 ZERG 概述
2020/03/14 星际争霸
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php学习笔记之 函数声明
2011/06/09 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python实现xlsx文件分析详解
2018/01/02 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
捐助贫困学生倡议书
2014/05/16 职场文书
会议主持人开场白台词
2015/05/28 职场文书
七一表彰大会简报
2015/07/20 职场文书
病假条格式范文
2015/08/17 职场文书
《大禹治水》教学反思
2016/02/22 职场文书