CSS 基础教程-048 CSS设置折叠的表格边框

hrs 提交于 2020/02/05 - 10:24 , 周三

我们在表格输出的时候一般都是双线表格,那么我们怎么把双线合并为单线边框呢?这一节我们就来学习表格折叠边框bodder-collapse。

实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table,th,td{border:1px solid black;}
th,td{width:100px;text-align:center;padding:5px;}
table{border-collapse:collapse;}

</style>

</head>
<body>
    <h1>折叠边框实例</h1>
    <table>
        <tr>
            <th>名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
        </tr>
        <tr>
        <td>苹果</td>
        <td>200</td>
        <td>5</td>
        <td>1000</td>
        </tr>


    </table>
</body>

</html>
~         

运行效果:

css_048.png

 

标签