html+css合并表格边框的示例代码
发布时间：2021-03-31 17:10:17 作者：程序猿想成程序狮 
我要评论
我要评论这篇文章主要介绍了html+css合并表格边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
我们给table和td标签加边框时，默认使用双边框，像这样。
如果我们希望合并table与td的边框，可以在table样式加设置border-collapse的属性值为collapse即可。如下图：
再看效果：
为了便于复制，这里给出代码：
<!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合并表格边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 在前端开发中经常会遇到标题合并的需求，今天小编给大家带来了使用html5实现表格实现标题合并的实例代码，感兴趣的朋友跟随小编一起看看吧2019-05-13
表格是日常常用的工具，很多时候需要用到单元合并，本文主要介绍了HTML表格合并的具体实现方式， 具有一定的参考价值，感兴趣的可以了解一下2023-01-05
HTML中table表格拆分合并(colspan、rowspan)
这篇文章主要介绍了HTML中table表格拆分合并(colspan、rowspan),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2021-04-07
这篇文章主要介绍了详解html中表格table的行列合并问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-07-28
表格是常见的数据统计的一种形式，合并单元格及合并表头经常在复杂表格中遇到，本文主要介绍了html原生table实现合并单元格以及合并表头的示例代码，感兴趣的可以了解一下2023-04-28
最新评论