テーブル

<div class="table-wrap">
	<table>
		<tbody>
			<tr>
				<th>ヘッダー</th>
				<td>
					色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
				</td>
			</tr>
			<tr>
				<th>ヘッダー</th>
				<td>
					色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
				</td>
			</tr>
			<tr>
				<th>ヘッダー</th>
				<td>
					色は匂へど散りぬるを我が世誰ぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
				</td>
			</tr>
		</tbody>
	</table>
</div>

.table-wrap {
	overflow-x: auto;
	border: 1px blue solid;
	border-right: none;
}
table {
	width: 100%;
	white-space: nowrap;
}
tr + tr {
	border-top: 1px blue solid;
}
th {
	border-right: 1px blue solid;
	padding: 5px;

	position: -webkit-sticky;   /* ヘッダー部を固定表示 */
	position: sticky;
	left: 0;
}
td {
	border-right: 1px blue solid;
	padding: 5px;
}
@media (min-width: 500px) {
	.table-wrap {
		overflow-x: unset;
	}
	table {
		white-space: normal;
	}
}