CSS テーブルをレスポンシブ対応で、横スクロールしたい

###CSS テーブルをレスポンシブ対応で、横スクロールしたいです

テーブルを<div class="table_scroll">で囲み、そのクラスに、スクロールをつけてみたつもりなのですが、
ヘッダ行だけが縦に並んで表示されてしまいます。

どこを修正すれば良いか、ご教授いただけると助かります。
よろしくお願いいたします。

HTML
1<H2>テストテーブル</H2>
2<div class="table_scroll">
3
4<table class="table_set" summary="テストテーブル">
5 <colgroup>
6  <col class="content">
7 </colgroup>
8 <colgroup>
9  <col class="detail">
10 </colgroup>
11 <colgroup>
12  <col class="number">
13 </colgroup>
14 <colgroup>
15  <col class="option">
16 </colgroup>
17
18    <tbody>
19	<thead>
20	<tr>
21		<th>内容</th>
22		<th>詳細</th>
23		<th>個数</th>
24		<th>オプション</th>
25	</tr>
26	</thead>
27	<tr>
28		<td>内容１</td>
29		<td>詳細１テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
30		<td>1</td>
31		<td> </td>
32	</tr>
33	<tr class="stripe">
34		<td>内容２</td>
35		<td>詳細２テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
36		<td>1</td>
37		<td> </td>
38	</tr>
39	<tr>
40		<td>内容３</td>
41		<td>詳細３テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
42		<td>3</td>
43		<td> </td>
44	</tr>
45	<tr class="stripe">
46		<td>内容４</td>
47		<td>詳細４テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
48		<td>1</td>
49		<td>●</td>
50	</tr>
51    </tbody>
52</table>
53
54</div>
55

CSS
1
2
3table.table_set {
4	width: 100%;
5	font-size: 12px;
6	border-collapse: collapse; /* 隣接する境界線を結合して（重ねて）表示する （初期値） */
7	border: 1px solid #dddcd6; /* 枠線 */
8}
9
10/* 列ごとに デザイン設定 */
11table.table_set tr td:nth-of-type(1) {
12	width: 11em;
13	font-weight: bold;
14}
15table.table_set tr td:nth-of-type(2) {
16}
17table.table_set tr td:nth-of-type(3) {
18	width: 4em;
19	text-align: center;
20}
21table.table_set tr td:nth-of-type(4) {
22	width: 7em;
23	text-align: center;
24}
25
26
27
28table.table_set th { /* TH 上部見出し */
29	background: #dddcd6;
30	color: #4d4e53;
31	font-weight: bold;
32	font-size: 12px;
33	text-align: center;
34	vertical-align: middle;
35	border: 1px solid #dddcd6; /* 枠線 */
36}
37
38table.table_set td { /* TD */
39	border: 1px solid #dddcd6; /* 枠線 */
40	padding: 1em;
41	line-height: 1.5em;
42	vertical-align: middle;
43}
44
45table.table_set tr.stripe { /* 奇数行に薄い色 */
46    background: #f7f6f4;
47}
48
49
50/* メディアクエリ */
51/* 600pxまでのサイズの場合→モバイル用)*/
52@media only screen and (max-width: 600px) {
53
54
55	table.table_set {
56		width: 600px;
57	}
58
59	.table_scroll{
60	overflow: auto;    /*tableをスクロールさせる*/
61	white-space: nowrap;  /*tableのセル内にある文字の折り返しを禁止*/
62	}
63	.table_scroll::-webkit-scrollbar{  /*tableにスクロールバーを追加*/
64	 height: 5px;
65	}
66	.table_scroll::-webkit-scrollbar-track{  /*tableにスクロールバーを追加*/
67	 background: #F1F1F1;
68	}
69	.table_scroll::-webkit-scrollbar-thumb {  /*tableにスクロールバーを追加*/
70	 background: #BCBCBC;
71	}
72
73}
74