tableをレスポンシブ対応にしたい

前提・実現したいこと

模写サイトをレスポンシブ化しようとしているときにエラーが発生した。

発生している問題・エラーメッセージ

レスポンシブ化すると画面からはみでる。

該当のソースコード

html
1
2    <section id="price-background__color" class="price">
3        <div class="common-inner price-inner">
4            <h2 class="section-title">価格</h2>
5            <p class="section-sub__title">PRICE</p>
6
7            <table border="1">
8                <tr>
9                    <td>HTMLコーディングトップページ</td><td>30.000円〜</td>
10                </tr>
11                <tr>
12                    <td>HTMLコーディング下層1ページ</td><td>10.000円〜</td>
13                </tr>
14                <tr>
15                    <td>HTML+WordPressトップページ</td><td>55.000円〜</td>
16                </tr>
17                <tr>
18                    <td>HTML+WordPress下層1ページ</td><td>15.000円〜</td>
19                </tr>
20            </table>
21            <p class="table-bottom">＊詳細な価格はページや仕様によって異なります</p>
22
23        </div>
24
25    </section>

css
1table,td{
2    border: 1px solid #00000029;
3}
4table{
5    background-color: #FFFFFF;
6    margin: 0 auto;
7    box-shadow:2px 2px 4px gray ;
8   
9}
10
11td{
12    font-size: 16px;
13    padding: 40px 20px;
14    padding-right: 300px;
15    
16}

試したこと

widthを%にしてやってみたが駄目だった

補足情報（FW/ツールのバージョンなど）

なし

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

回答1件

ベストアンサー

セル(td)にpadding-right: 300px;と固定値を設定してテーブルの幅を決めているので、画面をせまくしても縮まらずはみ出します。まずは、これを削除しましょう。

テーブルの幅を % で指定して、さらに最大幅(max-width)を固定値で指定するといいでしょう。そのうえでセルの幅を%で指定します。

設定例

css
1table {
2    width: 100%; /*追加*/
3    max-width: 980px; /*追加 */
4    background-color: #FFFFFF;
5    margin: 0 auto;
6    box-shadow:2px 2px 4px gray ;
7
8}
9
10td{
11    font-size: 16px;
12    padding: 40px 20px;
13    width: 60%; /* 追加 */
14/*    padding-right: 300px; 削除*/
15
16}

追加したプロパティの px や % は一例ですのでお好みで調整してください。

現状のHTMLなら、親要素の section の方で幅を決めたほうがいいかも。

css
1section {
2    max-width: 980px; /* お好みで調整してください */
3    width: 100%;  
4    margin: 0 auto;
5}
6table{
7    width: 100%;
8    background-color: #FFFFFF;
9    box-shadow:2px 2px 4px gray ;
10}