レスポンシブテーブル 枠線隙間あり

最終更新日

レスポンシブテーブルテンプレート

  1. テーブル隙間なし一重線
  2. テーブル枠線隙間あり

テーブル枠線隙間あり

DEMO

HTML

<!-- レスポンシブテーブル -->
<section id="table-contents">
<table class="table02">
<tr>
<th>この文章はダミーです。</th>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
</tr>
<tr>
<th>この文章はダミーです</th>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
</tr>
<tr>
<th>この文章はダミーです</th>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
</tr>
</table>
</section>
<!-- / レスポンシブテーブル -->



CSS

@charset "UTF-8";
/* CSS Document */
#table-contents {
width: 80%;
margin: 0 auto;
padding: 40px 0;
line-height: 180%;
}
/*テーブル隙間あり*/
table {
display: table;
border-collapse: separate;
border-spacing: 4px;
color: #fff;
}

.table02 {
width: 100%;
margin: 0 auto;
padding: 0 10px;

}

th, td {
padding: 10px;
background: #ddd;

}
th {
background: #333;
}
td {
background: #888;

}

/*----------------------------------------------------
.table02
----------------------------------------------------*/
.table02 th {
width: 30%;
padding: 1% 2%;
text-align: left;

}
.table02 td {
padding: 1% 2%;
text-align: left;

}
/*border-spacing: 4px;で,テーブル幅が枠線無しと微妙に違います*/

@media only screen and (max-width:480px) {
#table-contents {
width:100%;
line-height: 160%;
}
.table02 {
width: 100%;
margin: 0 auto;
padding: 0;

}
.table02 th, .table02 td {
width: 96%;
display: block;
border-top: none;
}
.table02 tr:first-child th {
border-top: 1px solid #ddd;
}
}

 

admin

東京都在住フリーのWebデザイナー、WEB講師

シェアする