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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
mysql时区问题
2008/03/26 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
Vue组件开发初探
2017/02/14 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Python中的整除和取模实例
2020/06/03 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
中学教师自我鉴定
2014/02/07 职场文书
法制宣传月活动总结
2014/04/29 职场文书
教师考察材料范文
2014/06/03 职场文书
公司董事长岗位职责
2014/06/08 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
旷课检讨书范文
2014/10/30 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis