投稿日: 投稿者: 1x2x3

table

CSSについて説明します。

display: tableについて説明します。

display: table

tableは、table wrapper boxをestablishします。
table wrapper boxは、table grid boxesの周りに生成されたblock boxです。

構造

W3Cの下記に構造を示す図があります。

17 Tables
CSS Table Module Level 3

それぞれに分解します。

display: table

tableタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table"><div>

</body>

表示は下記となります。

上記は下記と同様です。

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001"></table>

</body>

display: table-column-group

colgroupタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

div.test-007-colgroup-blue
{
    display: table-column-group;
    background-origin: padding-box;

    background: #3399FFCC;
}

div.test-007-col
{
    display: table-column;
}

div.test-007-tr
{
    display: table-row;
}

div.test-007-td
{
    display: table-cell;

    margin: 2px;
    padding: 2px;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table">
    <div class="test-007-colgroup-blue">
    <div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div><div class="test-007-col"></div>
    </div>
    <div class="test-007-tr">
    <div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div>
    </div>
</div>

</body>

表示は下記となります。

上記は下記と同様です。

test_007.css

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

colgroup.test-007-002
{
    background: #3399FFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001">
    <colgroup class="test-007-002">
    <col></col><col></col><col></col>
    </colgroup>
    <tr>
    <td></td><td></td><td></td>
    </tr>
</table>

</body>

display: table-column

colタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

div.test-007-colgroup
{
    display: table-column-group;
    background-origin: padding-box;
}

div.test-007-col-blue:nth-child(odd)
{
    display: table-column;
    background: #66CCFFCC;
}

div.test-007-col-blue:nth-child(even)
{
    display: table-column;
    background: #3399FFCC;
}

div.test-007-tr
{
    display: table-row;
}

div.test-007-td
{
    display: table-cell;

    margin: 2px;
    padding: 2px;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table">
    <div class="test-007-colgroup">
    <div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div><div class="test-007-col-blue"></div>
    </div>
    <div class="test-007-tr">
    <div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div><div class="test-007-td"></div>
    </div>
</div>

</body>

表示は下記となります。

上記は下記と見た目は同様です。

test_007.css

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

colgroup.test-007-002
{
    background: #3399FFCC;
}

col.test-007-003
{
    background: #66CCFFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001">
    <colgroup class="test-007-002">
    <col class="test-007-003"></col><col></col><col class="test-007-003"></col>
    <colgroup>
    <tr>
    <td></td><td></td><td></td>
    </tr>
</table>

</body>

display: table-row-group

tbodyタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

div.test-007-tbody-blue
{
    display: table-row-group;
    background: #3399FFCC;
}

div.test-007-tr
{
    display: table-row;
}

div.test-007-td
{
    display: table-cell;

    margin: 2px;
    padding: 2px;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table">
    <div class="test-007-tbody-blue">
        <div class="test-007-tr"><div class="test-007-td"></div></div>
        <div class="test-007-tr"><div class="test-007-td"></div></div>
        <div class="test-007-tr"><div class="test-007-td"></div></div>
    </div>
</div>

</body>

表示は下記となります。

上記は下記と同様です。

test_007.css

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

tbody.test-007-004
{
    background: #3399FFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001">
    <tbody class="test-007-004">
        <tr><td></td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </tbody>
</table>

</body>

display: table-row

trタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

div.test-007-tbody
{
    display: table-row-group;
}

div.test-007-tr-blue:nth-child(odd)
{
    display: table-row;
    background: #66CCFFCC;
}

div.test-007-tr-blue:nth-child(even)
{
    display: table-row;
    background: #3399FFCC;
}

div.test-007-td
{
    display: table-cell;

    margin: 2px;
    padding: 2px;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table">
    <div class="test-007-tbody">
        <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
        <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
        <div class="test-007-tr-blue"><div class="test-007-td"></div></div>
    </div>
</div>

</body>

表示は下記となります。

上記は下記と同様です。

test_007.css

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

tr.test-007-005:nth-child(odd)
{
    background: #66CCFFCC;
}

tr.test-007-005:nth-child(even)
{
    background: #3399FFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001">
    <tbody>
    <tr class="test-007-005"><td></td></tr>
    <tr class="test-007-005"><td></td></tr>
    <tr class="test-007-005"><td></td></tr>
    </tbody>
</table>

</body>

display: table-cell

tdタグ、thタグと対応します。

test_007.css

div.test-007-table
{
    display: table;
    box-sizing: border-box;
    border-spacing: 2px;

    width: 100%;
    height: 400px;

    border: 1px solid #3399FFCC;
}

div.test-007-tbody-blue-pattern
{
    display: table-row-group;
}
div.test-007-tbody-blue-pattern .test-007-tr:nth-child(odd) .test-007-td:nth-child(odd)
{
    background: #66CCFFCC;
}

div.test-007-tbody-blue-pattern .test-007-tr:nth-child(odd) .test-007-td:nth-child(even)
{
    display: table-cell;
    background: #3399FFCC;
}

div.test-007-tbody-blue-pattern .test-007-tr:nth-child(even) .test-007-td:nth-child(odd)
{
    display: table-cell;
    background: #3399FFCC;
}

div.test-007-tbody-blue-pattern .test-007-tr:nth-child(even) .test-007-td:nth-child(even)
{
    display: table-cell;
    background: #66CCFFCC;
}

/* 
div.test-007-tbody-blue-pattern .test-007-tr:nth-child(1n) .test-007-td:nth-child(3n)
{
    background: #66CCFFCC;
} 
*/

div.test-007-tr
{
    display: table-row;
}

div.test-007-td
{
    display: table-cell;

    margin: 2px;
    padding: 2px;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<div class="test-007-table">
    <div class="test-007-tbody-blue-pattern">
        <div class="test-007-tr">
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
        </div>
        <div class="test-007-tr">
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
        </div>
        <div class="test-007-tr">
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
            <div class="test-007-td"></div>
        </div>
    </div>
</div>

</body>

表示は下記となります。

上記は下記と同様です。

test_007.css

table.test-007-001
{
    width: 100%;
    height: 400px;
    border: 1px solid #3399FFCC;
}

tbody.test-007-007 tr:nth-child(odd) td:nth-child(odd)
{
    background: #66CCFFCC;
}

tbody.test-007-007 tr:nth-child(odd) td:nth-child(even)
{
    background: #3399FFCC;
}

tbody.test-007-007 tr:nth-child(even) td:nth-child(odd)
{
    background: #3399FFCC;
}

tbody.test-007-007 tr:nth-child(even) td:nth-child(even)
{
    background: #66CCFFCC;
}

test_007.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_007.css"/></head>
<body>

<table class="test-007-001">
    <tbody class="test-007-007">
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    </tbody>
</table>

</body>

まとめ

お疲れ様です。

headerとfooterとcaptionについての説明は省略しています。

参考

17 Tables
CSS Table Module Level 3
<display-internal>

参考 & 広告

Kindle版です。
紙の本と、PDF版があります。
Kindle版です。
電子書籍です。



«       »
カテゴリーCSS