<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://web.runland.co.jp/wp-content/uploads/2020/05/scroll-hint.min_.js"></script>
<script>
 $(function(){
	new ScrollHint('.table-scroll', {
		remainingTime: 5000
	});
}); 
</script>
<link rel="stylesheet" type="text/css" href="https://web.runland.co.jp/wp-content/uploads/2020/05/scroll-hint.css">

<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の指定 */
.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.