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代码实现文字描边
Apr 25 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
简单的python后台管理程序
2017/04/13 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
高中班主任评语大全
2014/04/25 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
村创先争优活动总结
2014/08/28 职场文书
违反交通法规检讨书
2014/09/10 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
齐云山导游词
2015/02/06 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python