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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
详解CSS故障艺术
May 25 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php模拟post提交数据的方法
2015/02/12 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Vue基础配置讲解
2019/11/29 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python进阶篇之字典操作总结
2016/11/16 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python梯度下降法的简单示例
2018/08/31 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
车工岗位职责
2013/11/26 职场文书
晨会主持词
2014/03/17 职场文书
化学教育专业自荐信
2014/07/04 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS