table-layout、border-collapse有何用途?

时间:2020-05-01

table-layout

table-layout CSS属性定义了用于布局表格单元格,行和列的算法。

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        table{
            table-layout: fixed;
            width: 200px;
            border: 1px solid green;
            margin: 50px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<script>

</script>
</body>
</html>

border-collapse

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

合并(collapsed )模式下,表格中相邻单元格共享边框。在这种模式下,CSS属性border-style 的值 inset 表现为槽,值 outset 表现为脊。

分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        table{
            table-layout: fixed;
            width: 200px;
            border: 1px solid green;
            margin: 50px;
            border-collapse: collapse;
        }
        td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<script>

</script>
</body>
</html>
table{
            table-layout: fixed;
            width: 200px;
            border: 1px solid green;
            margin: 50px;
            border-collapse: separate;
}