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 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 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(7) php 字符串相关应用
2010/03/05 PHP
php构造函数实例讲解
2013/11/13 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript函数详解
2014/11/17 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python实现AES加密和解密
2019/03/27 Python
python实现证件照换底功能
2019/08/20 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
高级Java程序员面试要点
2013/08/02 面试题
行政助理的岗位职责
2014/02/18 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
大学生见习报告总结
2014/11/04 职场文书
英语导游词
2015/02/13 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书