<div class="table-wrap">
<table class="table">
<tr>
<th>氏名</th>
<td>山田太郎</td>
</tr>
<tr>
<th>年齢</th>
<td>30歳</td>
</tr>
<tr>
<th>身長</th>
<td>170cm</td>
</tr>
</table>
<p>横スクロールで全体をご覧いただけます</p>
</div>
.table-wrap {
overflow-x : auto
}
.table {
display: fixed;
width: 400px;
text-align: center;
border-collapse: collapse;
}
th {
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background-color: #F4D7D7;
}
td {
width: 300px;
padding: 5px;
border: 1px solid #ccc;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.