表を見本の通り間隔を広げたい

前提・実現したいこと

表を見本の通りに広げたいです。
レスポンシブで柔軟に対応できるようにpxでの固定以外でなにか表現できる方法はないでしょうか？
（見本の画像を添付しますのでご覧ください。）

該当のソースコード

HTML
1<!--   price  価格 -->
2<section class="section-wrapper bg-sky">
3    <div class="content-wrapper">
4        <h2 class="title">価格</h2>
5        <h3 class="en-title">PRICE</h3>
6        <table>
7      
8                <tr>
9                    <th>HTMLコーディングトップページ</th>
10                    <td>30.000円〜</td>
11                
12                </tr>
13                
14           
15           
16                <tr>
17                    <th>HTMLコーディング下層1ページ</th>
18                    <td>10.000円〜</td>
19                
20                </tr>
21            
22        
23          
24                <tr>
25                    <th>HTML+WordPressトップページ</th>
26                    <td>55.000円〜</td>
27                
28                </tr>
29        
30         
31          
32                
33<tr>
34    <th>HTML+WordPress下層1ページ</th>
35    <td>15.000円〜</td>
36    
37</tr>
38
39
40       
41
42
43
44        </table>
45        <p class="attention">＊詳細な価格はページや仕様によって異なります</p>
46    </div>
47</section>

該当のソースコード

CSS
1html body tr {
2  border: 1px solid #E5E5E5;
3}
4
5html body table {
6  background-color: #FFFFFF;
7  margin: 0 auto;
8}
9html body td {
10  border-left: 1px solid #E5E5E5;
11  padding: 5% 4%;
12  text-align: left;
13  max-width: 1000px;
14}
15

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

###追記

css
1html body td {
2  border-left: 1px solid #E5E5E5;
3  padding: 5% 50% 4% 5%;
4  max-width: 1000px;
5}

先程はpaddingのあとにpadding-rightとやっていたので、うまくいかなかったかもと思い、paddingを上下左右に分割して右を大きめにとってみたのですが、td内の文字が改行されたりされなかったり、また、もっと余白を取ろうとしても広げることができません。
max-widthの成果と思いましたが、そちらをコメントアウトしても違うようでした。

引き続きご回答お待ちしております。

m.ts10806

2021/05/19 07:55

提示されたコードはSCSSでは？

mitrasi

2021/05/19 08:02

ご指摘ありがとうございます。修正致しました

mather

2021/05/19 08:16

見本があるのが気になりますが、学校の課題ではないですよね？ td のスタイル定義や class の指定については試しましたか？

mitrasi

2021/05/19 08:21

ご質問ありがとうございます。 tdの定義しておりましたが抜けておりましたので、追記致しました。大変失礼致しました。

mather

2021/05/19 08:26

改めて聞きますが、学校の課題ではないですよね？

mitrasi

2021/05/19 08:27

学校の課題ではありません。

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

回答2件

例えばこんな感じでしょうか。

css
1table {
2  background-color: #FFFFFF;
3  margin: 0 auto;
4  border: 2px solid #E5E5E5;
5  border-collapse: collapse;
6  width: 1000px;
7  max-width: 90vw;
8}
9
10th, td {
11  text-align: left;
12  padding: 2.5rem 1rem;
13  border: 1px solid #E5E5E5;
14}
15
16th {
17  width: 40%;
18  min-width: 250px;
19}

各長さは仮の値です。

投稿2021/05/19 08:52

mather

総合スコア6753

mitrasi

2021/05/19 09:00

>mather様ご回答ありがとうございます！確かに解決しました。ここからはお時間あればで構いませんが、なぜtdの余白を取りたいのにthに設定するという発想になるのでしょうか？ thでwidthの割合を設定することで残りのwidthをtdへ割り振っているというのはなんとなくわかりますが、直接tdに指定できなかった理由が気になります。

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