如何使用CSS合并表格边框?

在CSS中可以使用border-collapse属性来合并表格边框;border-collapse属性用于设置表中存在的单元格的边框,并告知这些单元格是否共享公共边框。

border-collapse属性设置表格的边框是否被合并为一个单一的边框。

语法:

border-collapse: separate|collapse|initial|inherit;

属性值:

● separate:用于设置单元格的单独边框。

● collapse:用于折叠相邻的细胞并形成共同的边界。

● initial:用于将border-collapse属性设置为其默认值。

● inherit:当border-collapse属性从其父元素继承时使用。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS border-collapse属性</title> 
		<style> 
            table, td, th { 
                border: 1px solid black; 
            } 
            #separateTable { 
                border-collapse: separate; 
            } 
            #collapseTable { 
                border-collapse: collapse; 
            } 
        </style> 
    </head> 
    <body> 
    <center> 
        <h2>border-collapse属性</h2> 
        <h3>默认或设置border-collapse:separate;</h3> 
        <table style="width:70%" id="separateTable"> 
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
            </tr> 
            <tr> 
                <td>晓华</td>
                <td>15</td> 
            </tr> 
            <tr> 
                <td>天健</td>
                <td>27</td> 
            </tr> 
            <tr> 
                <td>邓琴</td>
                <td>28</td>
            </tr> 
        </table>
        <h3>border-collapse:collapse;</h3> 
        <table style="width:70%" id="collapseTable"> 
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
            </tr> 
            <tr> 
                <td>晓华</td>
                <td>15</td> 
            </tr> 
            <tr> 
                <td>天健</td>
                <td>27</td> 
            </tr> 
            <tr> 
                <td>邓琴</td>
                <td>28</td>
            </tr> 
        </table>
    </center> 
</body> 
  
</html>

效果图:

0ec4e7a1b304b765601d1fca1a8cfcc.png

浏览器支持

border-collapse属性支持的浏览器如下:

● Apple Safari 1.2

● 谷歌Chrome 1.0

● Internet Explore / Edge 5.0

● Opera 4.0

● Firefox 1.0

以上就是如何使用CSS合并表格边框?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏