3@TECH BLOG

日々の業務で得た知見やノウハウ、技術情報などを発信します。

簡単にアレンジできるtableのHTMLとCSS

簡単にアレンジできるtableのHTMLとCSS

2016-09-09 スニペット / テーブル

レスポンシブ対応するようになった今でも、tableでの表組はよく使われます。 そこで、コーディングする際に簡単にアレンジできるコードのサンプルを作りました。 各ブレイクポイントでブロック表示に切り替わります。 ブレイクポイントは、bootstrapのグリッドシステムに準じます。

使用するclass名

.borderBox：囲み罫線
.borderHorizon：上下罫線

.borderSolid：実線罫線
.borderDashed：破線罫線
.borderDotted：点線罫線

.xs-block：xs以下でブロック表示に切り替える
.sm-block：sm以下でブロック表示に切り替える
.md-block：md以下でブロック表示に切り替える
.lg-block：lg以下でブロック表示に切り替える

.cell-xs-create：xs以下で左側に見出しセルを追加する（tdのtitle属性を反映、.xs-blockを併用）
.cell-sm-create：：sm以下で左側に見出しセルを追加する（tdのtitle属性を反映、.sm-blockを併用）
.cell-md-create：：md以下で左側に見出しセルを追加する（tdのtitle属性を反映、.md-blockを併用）
.cell-lg-create：：lg以下で左側に見出しセルを追加する（tdのtitle属性を反映、.lg-blockを併用）
 

View

thtdtd
thtdtd
thtdtd
thtdtd
thtdtd
thtdtd
thth
tdtd
thth
tdtd

Source

HTML
<table class="borderBox borderSolid">
    <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
</table>
<table class="borderHorizon borderDashed sm-block">
    <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
</table>
<table class="borderBox borderDotted xs-block">
   <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <th scope="row">th</th>
        <td>td</td>
        <td>td</td>
    </tr>
</table>
<table class="borderHorizon borderDotted sm-block cell-sm-create">
    <tr>
        <th scope="col">th</th>
        <th scope="col">th</th>
    </tr>
    <tr>
        <td title="title01">td</td>
        <td title="title02">td</td>
    </tr>
</table>
<table class="borderBox borderSolid xs-block cell-xs-create">
    <tr>
        <th scope="col">th</th>
        <th scope="col">th</th>
    </tr>
    <tr>
        <td title="title01">td</td>
        <td title="title02">td</td>
    </tr>
</table>
CSS
/* ====================================================
　基本設定
==================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
caption {
    text-align: left;
    font-size: 80%;
    font-weight: bold;
}
th,
td {
    border-color: #cccccc;
    padding: 0.5em;
    text-align: left;
    font-weight: normal;
}

@media print, screen and (min-width: 768px) {
th {
    background: #f7f7f7;
    padding: 0.5em;
    vertical-align: top;
    font-size: 14px;
}
td {
    padding: 0.5em;
    font-size: 14px;
}
}

@media screen and (max-width: 767px) {
th {
    background: #f7f7f7;
    padding: 0.5em;
}
td { padding: 0.5em; }
}
/* ====================================================
　囲み
==================================================== */
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }
.borderHorizon tr + tr td,
.borderHorizon tr + tr th { border-top: none; }
.borderBox th,
.borderBox td { border-width: 1px; }
.borderBox tr + tr td,
.borderBox tr + tr th { border-top: none; }
.borderBox th + th,
.borderBox th + td,
.borderBox td + td,
.borderBox td + td { border-left: none; }
/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　**のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    border-color: #cccccc;
    background: #eeeeee;
    width: 6em;
    height: 100%;
    padding: 0.5em;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media print, screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
table.xs-block { display: block; }
table.xs-block caption,
table.xs-block thead,
table.xs-block tbody,
table.xs-block tr,
table.xs-block th,
table.xs-block td { display: block; }
table.xs-block th {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
table.xs-block th + td,
table.xs-block td + td { border-top: none; }
table.cell-xs-create th { display: none; }
table.cell-xs-create td {
    position: relative;
    overflow: hidden;
    padding-left: 7em;
}
table.cell-xs-create td:before { content: attr(title); }
table.cell-xs-create tr:nth-of-type(2) td { border-top: 1px; }
}

@media print, screen and (max-width: 991px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
table.sm-block { display: block; }
table.sm-block caption,
table.sm-block thead,
table.sm-block tbody,
table.sm-block tr,
table.sm-block th,
table.sm-block td { display: block; }
table.sm-block th {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
table.sm-block th + td,
table.sm-block td + td { border-top: none; }
table.cell-sm-create th { display: none; }
table.cell-sm-create td {
    position: relative;
    overflow: hidden;
    padding-left: 7em;
}
table.cell-sm-create td:before { content: attr(title); }
table.cell-sm-create tr:nth-of-type(2) td { border-top: 1px; }
}

@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
table.md-block { display: block; }
table.md-block caption,
table.md-block thead,
table.md-block tbody,
table.md-block tr,
table.md-block th,
table.md-block td { display: block; }
table.md-block th {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
table.md-block th + td,
table.md-block td + td { border-top: none; }
table.cell-md-create th { display: none; }
table.cell-md-create td {
    position: relative;
    overflow: hidden;
    padding-left: 7em;
}
table.cell-md-create td:before { content: attr(title); }
table.cell-md-create tr:nth-of-type(2) td { border-top: 1px; }
}

@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
table.lg-block { display: block; }
table.lg-block caption,
table.lg-block thead,
table.lg-block tbody,
table.lg-block tr,
table.lg-block th,
table.lg-block td { display: block; }
table.lg-block th {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
table.lg-block th + td,
table.lg-block td + td { border-top: none; }
table.cell-lg-create th { display: none; }
table.cell-lg-create td {
    position: relative;
    overflow: hidden;
    padding-left: 7em;
}
table.cell-lg-create td:before { content: attr(title); }
table.cell-lg-create tr:nth-of-type(2) td { border-top: 1px; }
}
SCSS
/* ====================================================
　テーブル
==================================================== */

//ボーダーカラー
$table_border_color : #cccccc;

//caption 設定
@mixin table_caption_style {
}

//　PC設定
//=================================

//セルth 設定
@mixin table_th_style_pc {
    background:#f7f7f7;
    padding: 0.5em;
    vertical-align:top;
    font-size:$base_text_size;
}
//セルth 設定
@mixin table_td_style_pc {
    padding: 0.5em;
    font-size:$base_text_size;
}

//　SP設定
//=================================

//セルth 設定
@mixin table_th_style_sp {
    background:#f7f7f7;
    padding: 0.5em;
}
//セルth 設定
@mixin table_td_style_sp {
    padding: 0.5em;
}


//================　設定ここまで　=================

/* ====================================================
　基本設定
==================================================== */
table {
    border-collapse:separate;
    border-spacing:0;
    width: 100%;
}
caption {
    text-align: left;
    font-size: 80%;
    font-weight: bold;
}
th, td {
    border-color: $table_border_color;
    padding: 0.5em;
    text-align: left;
    font-weight: normal;
}

@media print, screen and (min-width: 768px) {
    th {@include table_th_style_pc;}
    td {@include table_td_style_pc;}
}
@media screen and (max-width: 767px){
    th {@include table_th_style_sp;}
    td {@include table_td_style_sp;}
}

/* ====================================================
　囲み
==================================================== */
.borderHorizon {
	th, td {border-width: 1px 0;}
    tr + tr {
        td,
        th { border-top: none; }
    }
}
.borderBox {
	th, td {border-width: 1px;}
    tr + tr {
        td,
        th { border-top: none; }
    }
    th + th,
    th + td,
    td + td,
    td + td { border-left: none; }
}

/* ====================================================
　線種
==================================================== */
.borderSolid {
	th {border-style: solid;}
    td {
        border-style: solid;
        &:before {
            border-style: solid;
        }
    }
}
.borderDotted {
	th {border-style: dotted;}
    td {
        border-style: dotted;
        &:before {
            border-style: dotted;
        }
    }
}
.borderDashed {
    th {border-style: dashed;}
    td {
        border-style: dashed;
        &:before {
            border-style: dashed;
        }
    }
}

/* ====================================================
　**のときTHをサイドに作る
==================================================== */
table {
    &.cell-xs-create td:before,
    &.cell-sm-create td:before,
    &.cell-md-create td:before,
    &.cell-lg-create td:before {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        border-width: 0 1px 0 0;
        border-color: $table_border_color;
        background: #eeeeee;
        width: 6em;
        height: 100%;
        padding: 0.5em;
    }
    &.borderHorizon {
        &.cell-xs-create td:before,
        &.cell-sm-create td:before,
        &.cell-md-create td:before,
        &.cell-lg-create td:before {border: none;}
    }
}
@mixin cell-block {
    display: block;
	caption, thead, tbody, tr, th, td {display: block;}
    th {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
    th + td,
    td + td {border-top:none;}
}
@mixin cell-create {
    th {display: none;}
    td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
        &:before {content: attr(title);}
    }
    tr:nth-of-type(2) {
        td {border-top:1px;}
    }
}
@media print, screen and (max-width: 767px) {
  /* ====================================================
  　xsのときcellをBlock
  ==================================================== */
    table {
        // cellをBlock
        &.xs-block {
            @include cell-block;
        }
        // THをサイドに作る
        &.cell-xs-create {
            @include cell-create;
        }
    }
}

@media print, screen and (max-width: 991px) {
  /* ====================================================
  　smのときcellをBlock
  ==================================================== */
    table {
        // cellをBlock
        &.sm-block {
            @include cell-block;
        }
        // THをサイドに作る
        &.cell-sm-create {
            @include cell-create;
        }
    }
}

@media screen and (max-width: 1199px) {
  /* ====================================================
  　mdのときcellをBlock
  ==================================================== */
    table {
        // cellをBlock
        &.md-block {
            @include cell-block;
        }
        // THをサイドに作る
        &.cell-md-create {
            @include cell-create;
        }
    }
}

@media screen and (max-width: 9999px) {
  /* ====================================================
  　lgのときcellをBlock
  ==================================================== */
    table {
        // cellをBlock
        &.lg-block {
            @include cell-block;
        }
        //　THをサイドに作る
        &.cell-lg-create {
            @include cell-create;
        }
    }
}

Contact お問い合わせ

お気軽にお問い合わせください。

PageTop