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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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中GET变量的使用
2006/10/09 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js实现开关灯效果
2020/03/30 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
Python实现CET查分的方法
2015/03/10 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
详解Python locals()的陷阱
2019/03/26 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
医学生个人求职信范文
2013/09/24 职场文书
建房协议书
2014/04/11 职场文书
护士节策划方案
2014/05/19 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
七一建党节演讲稿
2014/09/11 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年话务员工作总结
2014/11/19 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers