tableを記事の幅で表示させてはみ出る部分はスクロールさせたいです！

HTML
1<body>
2 <table>
3  <tbody>
4   <tr>
5    <th></th>
6    <th></th>
7    <th></th>
8    <th></th>
9    <th></th>
10   </tr>
11   <tr>
12    <td></td>
13    <td></td>
14    <td></td>
15    <td></td>
16    <td></td>
17   </tr>
18  </tbody>
19 </table>
20</body>

CSS
1body {
2 width: 500px;
3}
4table {
5 display: block;
6 border-collapse: collapse;
7 width: 100%;
8}
9tbody {
10 display: block;
11 overflow-x: scroll;
12}
13th , td {
14 border: 1px solid #aaa;
15 width: 130px;
16}

###やりたいこと
tableをbody幅いっぱいに表示し、かつはみ出る部分はスクロールできるようにしたいです。
また、スクロールする際一番左の列は固定できるようにしたいです。

どなたか詳しい方ご回答お願いいたします！！

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<style>
6		table {
7		 	border-collapse: collapse;
8		 	width: 4000px;
9		}
10		th , td {
11			border: 1px solid #aaa;
12			width: 500px;
13		}
14		th:first-of-type, td:first-of-type {
15			width: 100px;
16			background: #ddd;
17          // position: sticky; は，現時点IEでは未対応．
18			position: sticky;
19			left: 0;
20		}
21	</style>
22</head>
23<body>
24 <table>
25  <tbody>
26   <tr>
27    <th>どなたか</th>
28    <th></th>
29    <th></th>
30    <th></th>
31    <th></th>
32    <th></th>
33    <th></th>
34    <th></th>
35   </tr>
36   <tr>
37    <td></td>
38    <td>詳しい方</td>
39    <td>ご回答</td>
40    <td>お願い</td>
41    <td>いたし</td>
42    <td>ます</td>
43    <td>！</td>
44    <td>！</td>
45   </tr>
46  </tbody>
47 </table>
48</body>
49</html>