<div class="table-scroll">
<table>
<tbody>
<tr>
<th>商品名</th>
<td colspan="3">チョコレート</td>
</tr>
<tr>
<th>種類</th>
<td>ビター</td>
<td>ミルク</td>
<td>ホワイト</td>
</tr>
<tr>
<th>説明</th>
<td>ミルク(乳製品)が入らない、カカオマスが40~60%のチョコレートのことをいいます。</td>
<td>ミルク(乳製品)の入ったチョコレートのことです。</td>
<td>ココアバターにミルク、砂糖などを加えて作るチョコレートのことです。</td>
</tr>
</tbody>
</table>
</div>
.table-scroll{
  overflow: auto; /*スクロールさせる*/
  white-space: nowrap; /*文字の折り返しを禁止*/
  width:200px; /*今回の設置を分かりやすくするためワザと狭い幅を指定。本来は不必要な指定です。*/
}

/* 以下、スクロールバーを追加 */
.table-scroll::-webkit-scrollbar{  
 height: 5px;
}
.table-scroll::-webkit-scrollbar-track{
 background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
 background: #999;
}

/* 以下、tableの指定 */
.table-scroll table{
	border-collapse:collapse;
	border-spacing:0;
  border-top:#ccc solid 1px;
  border-left:#ccc solid 1px;
}
.table-scroll table th,
.table-scroll table td{
  padding:10px 15px;
  font-weight:normal;
  border-right:#ccc solid 1px;
  border-bottom:#ccc solid 1px;
  font-size:12px;
}
.table-scroll table th{
  background:#eee;
  width:80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.