CSS 之表格（Table）

一、属性

Properties
属性		Description
简介
table-layout 设置或检索表格的布局算法
border-collapse 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-side 设置或检索表格的caption对象是在表格的那一边
empty-cells 设置或检索当表格的单元格无内容时，是否显示该单元格的边框

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        h1 {
            font-size: 16px;
            font-family: Arial;
        }

        .test {
            empty-cells: show;
        }

        .test2 {
            empty-cells: hide;
        }
    </style>
</head>
<body>
<h1>show:</h1>
<table border="1" class="test">
    <tbody>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Joy</td>
        <td>26</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Kate</td>
        <td></td>
    </tr>
    </tbody>
</table>

<h1>hide:</h1>
<table border="1" class="test2">
    <tbody>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Joy</td>
        <td>26</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Kate</td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>

</html>

posted @ 2019-12-13 17:04  样子2018  阅读(555)  评论(0)  编辑  收藏  举报