Omotegumi1

by hondana

HTML

<table>
<tbody>
<tr>
<th>&lt;thead&gt;</th>
<td>tableのヘッダー部分</td>
</tr>
<tr>
<th>&lt;tbody&gt;</th>
<td>tableのボディ部分</td>
</tr>
<tr>
<th>&lt;tfoot&gt;</th>
<td>tableのフッター部分</td>
</tr>
</tbody>
</table>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
table {
    border-collapse: collapse;
    width: 100%;
}
table th,
table td {
    padding: 10px;
    border: 1px solid #999;
}
table th {
    background-color: #eee;
    text-align: center;
    width: 30%;
}
@media screen and (max-width: 320px) {
table {
    border-top: 1px solid #999;
}
table td {
    display: block;
    text-align: center;
}
table th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
}
}