css中的border-collapse属性如何设置表格边框线？（代码示例）1

css中的border-collapse属性如何设置表格边框线？（代码示例）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

css中的border-collapse属性如何设置表格边框线？本篇文章就给大家介绍css中的border-collapse属性是什么？border-collapse属性设置表格边框线的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来了解一下css border-collapse属性是什么？它的作用。

border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。

基本语法：

border-collapse : separate (专业提供视频软件下载)

 
    collapse ;

separate：默认值，边框会被分开，即显示双线边框。

collapse：如果可能，边框会合并显示为一条线，即单线边框。

由此我们也可以看出border-collapse 属性可以设置两种表格边框线样式，分别为：双线边框和单线边框。

下面我们通过简单的代码示例来看看表格两种边框线样式的实现方法

双线表格边框的实现

html代码：

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; }

效果图：

单线边框的实现也很简单，它是在双线样式的基础上，设置border-collapse: collapse;把相邻的两个table边框合并成一个，使得相邻的两条线并在一起，边框就以单线的形式显示了。

总结：表格边框的无论是单线边框样式，还是双线边框样式都在前端页面中应用广泛，大家可以根据自己的需求使用不同的样式，希望能对大家的学习有所帮助。更多相关教程请访问： CSS基础视频教程， HTML视频教程，bootstrap视频教程！

以上就是css中的border-collapse属性如何设置表格边框线？（代码示例）的详细内容，更多请关注php中文网其它相关文章！

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

标签:css中的border-collapse属性如何设置表格边框线？（代码示例）