スマホ時のtableの横スクロールについて

Question

tableの横幅に関して
PCサイトは2カラムで横幅680pxで表示されてます。
こちらスマホ時でも同じようにtableを680pxに設定し横スクロール表示で表示したいのですが、
cssをどのように記載すればよろしいでしょう？
tableタグなどに設定しても反映されなく、レクチャーいただけますと幸いです。
4列目の文章量によって横幅があるので、横幅を指定したいです

html

<div class="contents price">
  <table class="priceTable">
    <caption class="top"><span>text</span></caption>
    <caption class="bottom">text</caption>
    <tr>
      <td class="head" colspan="12">text表</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5" rowspan="3">text</td>
    </tr>
    <tr>
      <td colspan="2">2text割負担</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
      <td colspan="3">text</td>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="4">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="2" rowspan="2">text円</td>
      <td colspan="5" rowspan="4">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="3" rowspan="4">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="5" rowspan="4">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="3" rowspan="5">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="5" rowspan="5">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="3" rowspan="3">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="5" rowspan="3">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="3">text</td>
      <td colspan="2" rowspan="3">text</td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="5" rowspan="2">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">text</td>
      <td colspan="2" rowspan="2"></td>
      <td colspan="2" rowspan="2">text</td>
      <td colspan="5" rowspan="2">text</td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td colspan="3" rowspan="8">text</td>
      <td class="bold" colspan="4">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td class="bold" colspan="4">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td class="bold" colspan="4">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
      <td colspan="5" rowspan="2">text</td>
    </tr>
    <tr>
      <td colspan="2">text</td>
      <td colspan="2">text</td>
    </tr>
    <tr>
      <td colspan="3">text</td>
      <td colspan="2"></td>
      <td colspan="2">text</td>
      <td colspan="5">text</td>
    </tr>
  </table>
</div>

css

.price .priceTable{
	border-collapse: collapse;
	display: block;
	width:100%;
	padding: 10px;

}

.price .priceTable td{

	border: 1px solid #CCCCCC;
	padding: 5px;
}

.price .priceTable td:nth-child(1){
	width:19% ;

}

.price .priceTable .head{
	font-size: 18px;
	text-align: center;
	font-weight:bold;
}

.price .priceTable .bold{
	font-weight:bold;
}

.price .priceTable > .top{
	caption-side: top;
	text-align: right;
  }

  .price .priceTable > .top span{
	display: none;
}

.price .priceTable > .bottom{
	caption-side: bottom;
	text-align: left;
  }


@media screen and (max-width:480px) {

	.price{
		width: auto !important;
		margin: 1rem;
		overflow-x: scroll;
	}
	.price .priceTable{
		width: 100%;
		border-collapse: collapse;
		white-space: nowrap;
	}

	.price .priceTable > .top{
		text-align: left;
	  }

	.price .priceTable > .top span{
		display: block;
	}

	.price .priceTable td:nth-child(1){
		width: 80% ;
	}
}

デモ
codepen
https://codepen.io/kkcol/pen/jOxpwYY

Answer 1

tableを囲んでいる<div class="contents price">
に対して、width:100%（スマートフォンの画面からはみ出さないようなwidth）と、overflow:auto（中のtableがはみ出たときスクロールを発生させる）を指定する。

そして、priceTableに対してwidth:680pxを指定してはどうでしょうか？