レスポンシブテーブル

<div class="table-wrapper">
	<table>
		<thead>
			<tr>
				<th><span>商品</span></th>
				<th><span>PRODUCT ENGLISH</span></th>
				<th><span>値段１</span></th>
				<th><span>値段２</span></th>
				<th><span>値段３</span></th>
				<th><span>値段４</span></th>
				<th><span>値段５</span></th>
				<th><span>値段６</span></th>
				<th><span>値段７</span></th>
				<th><span>値段８</span></th>
				<th><span>値段９</span></th>
				<th><span>値段１０</span></th>
				<th><span>備考</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>りんご</th>
				<th>apple</th>
				<td>100578</td>
				<td>39000</td>
				<td>70</td>
				<td>2010</td>
				<td>99</td>
				<td>20000</td>
				<td>190</td>
				<td>750000</td>
				<td>599</td>
				<td>100545</td>
				<td>色は匂へど　散りぬるを　我が世誰ぞ</td>
			</tr>
			<tr>
				<th>いちご</th>
				<th>strawberry</th>
				<td>20000</td>
				<td>190</td>
				<td>750000</td>
				<td>599</td>
				<td>100545</td>
				<td>100578</td>
				<td>39000</td>
				<td>70</td>
				<td>2010</td>
				<td>99</td>
				<td>今日越えて　浅き夢見じ　酔ひもせず</td>
			</tr>
		</tbody>
	</table>
</div>

.table-wrapper {
	overflow: auto;
}
table {
	width: 100%;
	min-width: 600px;
	table-layout: fixed;
	border-spacing: 0;
}
table tbody tr:nth-child(even) {
	background-color: #eee;
}
table th,
table td {
	text-align: center;
	border-bottom: 1px solid orange;
}
table th:nth-child(1) {
	background-color: #ccc;
	width: 100px;
	position: sticky;
	left: 0;
}
table th:nth-child(2) {
	background-color: #ccc;
	width: 150px;
	position: sticky;
	left: 100px;
}
table th:last-child {
	width: 150px;
}
@media (max-width: 900px) {
	table th span {
		writing-mode: vertical-lr;
	}
}