テーブルレイアウト一覧

CSSはスタイルシート・responsive.cssの一番下にコピペ。

横に見出しがあるテーブル

テーブル見出しth 内容td
テーブル見出しth 内容td

HTML

<table class="design_table">
<tbody>
<tr><th>テーブル見出しth</th><td>内容td</td></tr>
<tr><th>テーブル見出しth</th><td>内容td</td></tr>
</tbody></table>

幅を均等にするには 2カラムなら width: 50%; 3カラムなら width: 33.33%; とする。

スタイルシート (style.css)

.design_table {
    width: 100%;
}
.design_table td, .design_table th {
    width: 50%;
}

SP時1カラムにするには

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.design_table td, .design_table th {
    padding: 14px 15px;
    display: block;
    border-bottom: none;
    width: 100%;
}
.design_table tr:last-child {
    border-bottom: 1px solid #ddd;;
}
}

上に見出しがあるテーブル

テーブル見出しth テーブル見出しth
内容td 内容td

HTML

<table class="design_table">
<tbody>
<tr><th>テーブル見出し①th</th><th>テーブル見出し②</th></tr>
<tr><td>内容tdth</td><td>内容td</td></tr>
</tbody></table>

表は左⇒右⇒下の段の左⇒右の順に表示となり。テーブル見出し①⇒テーブル見出し②の順番となり。
上に見出しがあるテーブルはSP時1カラムには向かない。

2カラムテーブル

SP1カラム

内容td 内容td
内容td 内容td

HTML

<table class="table_2c">
<tbody>
<tr><td>内容tdth</td><td>内容td</td></tr>
<tr><td>内容tdth</td><td>内容td</td></tr>
</tbody></table>

スタイルシート (style.css)

.table_2c {
    width: 100%;
}
.table_2c td, .table_2c th {
    border: 1px solid #ddd;
    padding: 15px 15px;
    line-height: 2;
    background: #fff;
    width: 50%;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.table_2c td, .table_2c th {
    padding: 14px 15px;
    display: block;
    border-bottom: none;
    width: 100%;
}
.table_2c tr:last-child {
    border-bottom: 1px solid #ddd;;
}
}

3カラムテーブル

SP1カラム

内容td 内容td 内容td
内容td 内容td 内容td

HTML

<table class="table_3c">
<tbody>
<tr><td>内容tdth</td><td>内容td</td><td>内容td</td></tr>
<tr><td>内容tdth</td><td>内容td</td><td>内容td</td></tr>
</tbody></table>

スタイルシート (style.css)

.table_3c {
    width: 100%;
}
.table_3c td, .table_3c th {
    border: 1px solid #ddd;
    padding: 15px 15px;
    line-height: 2;
    background: #fff;
    width: 33.33%;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.table_3c td, .table_3c th {
    padding: 14px 15px;
    display: block;
    border-bottom: none;
    width: 100%;
}
.table_3c tr:last-child {
    border-bottom: 1px solid #ddd;;
}
}

4カラムテーブル

SP1カラム

内容td 内容td 内容td 内容td
内容td 内容td 内容td 内容td

HTML

<table class="table_4c">
<tbody>
<tr><td>内容tdth</td><td>内容td</td><td>内容td</td><td>内容td</td></tr>
<tr><td>内容tdth</td><td>内容td</td><td>内容td</td><td>内容td</td></tr>
</tbody></table>

スタイルシート (style.css)

.table_4c {
    width: 100%;
}
.table_4c td, .table_4c th {
    border: 1px solid #ddd;
    padding: 15px 15px;
    line-height: 2;
    background: #fff;
    width: 25%;
}

responsive.css (css/responsive.css)

@media screen and (max-width:480px) {
.table_4c td, .table_4c th {
    padding: 14px 15px;
    display: block;
    border-bottom: none;
    width: 100%;
}
.table_4c tr:last-child {
    border-bottom: 1px solid #ddd;;
}
}
TOP