レスポンシブテーブル 隙間なし一重線

最終更新日

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

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

テーブル隙間なし一重線

レスポンシブテーブルテンプレート Responsive Table Template コピペでOK!

DEMO

HTML

<section id="table-contents"> 
<table class="table01"> 
<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;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
border-color: grey;
}

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

}
th {
background: #f4f4f4;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
/*----------------------------------------------------
.table01
----------------------------------------------------*/
.table01 th {
width: 30%;
padding: 1% 2%;
text-align: left;
}
.table01 td {
padding: 1% 2%;
text-align: left;
}

@media only screen and (max-width:480px) {
#table-contents {
width:100%;
line-height: 160%;
}
.table01 {
width: 96%;
margin: 0 auto;
}
.table01 th, .table01 td {
width: 96%;
display: block;
border-top: none;
}
.table01 tr:first-child th {
border-top: 1px solid #ddd;
}
}

シェアする