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 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 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中用数组的方法设置cookies
2011/04/21 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery 表格工具集
2010/04/25 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
关于JS模块化的知识点分享
2019/10/16 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
python+opencv实现动态物体识别
2018/01/09 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Php多进程实现代码
2018/05/07 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
专题组织生活会方案
2014/06/15 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python