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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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中的超全局变量
2006/10/09 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python字典的值可以修改吗
2020/06/29 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Flask处理Web表单的实现方法
2021/01/31 Python
服装设计专业自荐书范文
2013/12/30 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
明信片寄语大全
2014/04/08 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年商场工作总结
2014/11/22 职场文书
个人自荐书怎么写
2015/03/26 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书