需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先打开html编辑器，新建一个html文件，例如：index.html。
2、其次，在index.html的<body>标签中，添加代码：<hr/>。
3、浏览器运行index.html页面，此时成功在html中画了一条线。
这篇文章主要介绍css中border-collapse属性设置表格边框线的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先我们来了解一下css border-collapse属性是什么？它的作用。
border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。
基本语法：border-collapse : separate | collapse
separate：默认值，边框会被分开，即显示双线边框。
collapse：如果可能，边框会合并显示为一条线，即单线边框。
由此我们也可以看出border-collapse 属性可以设置两种表格边框线样式，分别为：双线边框和单线边框。
下面我们通过简单的代码示例来看看表格两种边框线样式的实现方法
双线表格边框的实现
html代码：
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
内容 内容 内容 内容 内容
css代码：table,table td{
text-align: center
border: 1px solid #000
border-collapse：separate；
}
table td{
padding: 10px 30px
}
效果图：
表格边框的双线样式其实很简单，只要同时设置表格外边框和table里的每个单元格的边框，就可以实现了。因为separate是默认值，就算是不设置border-collapse：separate；表格也会呈现双线效果。我们主要是来看看border-collapse属性合并边框，实现单线边框的方法，html代码一样，只需设置css样式：
css代码：table,table tr td {
border: 1px solid #000
text-align: center
border-collapse: collapse
}
table tr td {
padding: 10px 30px
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）