html+css合并表格边框的示例代码_CSS教程_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合并表格边框内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • html table 表格边框的实现思路
  • html做表格只显示表格的外边框
  • 有关html表格边框的设置小技巧
  • css实现表格细边框的两种方法
  • css控制表格细边框样式
  • 表格边框以虚线显示的css样式
  • ie6 表格td中无内容时不显示边框的解决办法
  • html table表格边框的控制详细说明
  • 用css设置表格table的细边框的比较好用的方法
  • html表格边框的控制实现代码
  • 怎么用CSS设置html中的表格边框样式
  • 怎么用CSS设置html中的表格的边框样式?
  • 嵌套表格 边框合并的css如何设置?
  • html+css表格的边框显示是双线,怎样变成像word中...
  • html结合css做的一个表格 如何去掉上下边框 我用的...
  • html+css表格的边框显示是双线,怎样变成像word中...
  • html网页设计表格,如何通过css让表格只有外边框,而...
  • html网页设计表格,如何通过css让表格只有外边框,而...
  • 将表格table边框双线合并为单线的CSS语句为
  • 怎么用CSS设置html中的表格边框样式
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程htmlcss合并html table 表格边框的实现思路html做表格只显示表格的外边框有关html表格边框的设置小技巧css实现表格细边框的两种方法css控制表格细边框样式表格边框以虚线显示的css样式ie6 表格td中无内容时不显示边框的解决办法html table表格边框的控制详细说明用css设置表格table的细边框的比较好用的方法 html表格边框的控制实现代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字html+css合并表格边框的示例代码css实现漂亮的时钟动画效果的实例代码使用css样式设计一个简单的html登陆界面的实现css3实现模糊背景的三种效果示例原生css实现文字无限轮播的通用方法css实现多个元素在盒子内两端对齐效果css实现移动端横向滚动导航条(pc端也适用)css实现滚动时选中区域字体颜色加深的示例代码css flex布局超长自动换行的示例代码css实现fullpage.js全屏滚动效果的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved