表作成で一つの項目に複数が入っている原因

今回、デモサイト作成途中に解決できずにいるので質問いたします。

◆やったこと
「サイト表の項目に複数ある原因」で調べましたが解決できそうなサイトが見つからない。
S,M,Lの部分もwidth: 16%;で作成したものの変わらない。

サポートしていただけると幸いです。宜しくお願い致します

完成図

現状

→サイズ表のところです。
size,chest,weist,heightが一括りになっている点です。
それぞれ、classを付けてwidthで区分しようとしていますが、できていません！！

HTML
1<head>
2   ｛省略｝
3    <link rel="stylesheet" href="CSS/destyle.css">
4    <link rel="stylesheet" href="css/style.css">
5</head>
6<body>
7    <h1 class="hp-title">TOTALLY</h1>
8    <header class="header">
9        省略
10    </header>
11    <main class="main">
12        <section class="EC wrapper">
13            <div class="ec-display">
14                <div class="ec-img">
15                    <img src="./img/Kawasan Fall.jpeg" alt="Kawasan">
16                </div>
17                <div class="ec-about">
18                    <div class="ec-title"> 
19                        <p>TOTALLY Short Sleeve Shirt</p>
20                    </div>
21                    <p>テキストテキストテキストテキストテキストテキストテキスト
22                        テキストテキストテキストテキストテキストテキストテキスト
23                        
24                    </p>
25                    <span class="price">￥9,999 +tax</span>
26                    <table class="order-table">
27                        <thead>
28                            <tr>
29                                <th class="color">Color</th>
30                                <th class="size">Size</th>
31                                <th class="quantity">Quantity</th>
32                            </tr>
33                        </thead>
34                        <tbody>
35                            <!--1-->
36                            <tr>
37                                <td>White</td>
38                                <td>S</td>
39                                <td>
40                                    <select name="quantity" id="quantity_s">
41                                        <option value="1" class="">1</option>
42                                        <option value="2" class="">2</option>
43                                        <option value="3" class="">3</option>
44                                    </select>
45                                </td>
46                            </tr>
47                            <!--2-->
48                            <tr>
49                                <td>White</td>
50                                <td>M</td>
51                                <td>
52                                    <select name="quantity" id="quantity_m">
53                                        <option value="1" class="">1</option>
54                                        <option value="2" class="">2</option>
55                                        <option value="3" class="">3</option>
56                                    </select>
57                                </td>
58                            </tr>
59                            <tr>
60                                <td>White</td>
61                                <td>LL</td>
62                                <td>
63                                    <select name="quantity" id="quantity_l">
64                                        <option value="1" class="">1</option>
65                                        <option value="2" class="">2</option>
66                                        <option value="3" class="">3</option>
67                                    </select>
68                                </td>
69                            </tr>
70
71                        </tbody>
72                    </table>
73                    <div class="order-link">
74                        <a href="#">add to cart</a>
75                    </div>
76               
77                <table class="size-table">
78                    <thead>
79                          <tr>
80                            <th class="size">Size</th>
81                            <th class="chest">Chest</th>
82                            <th class="weist">Weist</th>
83                            <th class="height">Height</th>
84                        </tr>
85                    </thead>
86                    <tbody>
87                        <tr>
88                            <th>S</th>
89                            <td>99~99</td>
90                            <td>99~99</td>
91                            <td>99~99</td>
92                        </tr>
93                        <tr>
94                            <th>M</th>
95                            <td>99~99</td>
96                            <td>99~99</td>
97                            <td>99~99</td>
98                        </tr>
99                        <tr>
100                            <th>L</th>
101                            <td>99~99</td>
102                            <td>99~99</td>
103                            <td>99~99</td>
104                        </tr>
105                    </tbody>
106                </table>
107            </div>
108        </div>
109        </section>
110
111    </main>
112    <footer class="footer">
113
114    </footer>
115
116</body>
117</html>

marlboro_tata

2021/07/03 07:00

table.size-table のヘッダーのマークアップが間違っています。 <table class="size-table"> <thead> <tr> <th class="size">Size</th> <th class="chest">Chest</th> <th class="weist">Weist</th> <th class="height">Height</th> </tr> </thead> HTMLを直したら、CSSの　.size-table > thead にある display: flex; を削除してください。 sassに変数が残っているとコンパイルできないので、コンパイル後のCSSを掲載するようにするとより回答を得られやすくなると思います。その上で、表組みの見え方の「何が問題なのか」を、もう少し具体的に、言語化してください。画像の通りにしたいということであれば、なるべく無駄な情報は省いて、デザイン部分のみを示してアップする方がいいと思います。

free_teku

2021/07/03 12:49

かしこまりました。tataさん、アドバイスをもとに修正いたします。何卒宜しくお願い致します

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

回答1件

自己解決

【追記です】

CSS
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5
6body {
7  max-width: 1280px;
8  background-color: #fff;
9  font-size: 1.2rem;
10  color: #333;
11}
12
13img {
14  max-width: 100%;
15  height: auto;
16  vertical-align: bottom;
17}
18
19h1 {
20  font-size: 1.6rem;
21  font-weight: bold;
22  text-align: center;
23  margin-top: 46px;
24}
25
26li {
27  list-style: none;
28}
29
30.wrapper {
31  max-width: 800px;
32  margin: 0 auto;
33}
34
35.header {
36  max-width: 1140px;
37  border-bottom: 1px solid #c3c3c3;
38  margin: 0 auto 50px auto;
39}
40
41.nav {
42  display: -webkit-box;
43  display: -webkit-flex;
44  display: -ms-flexbox;
45  display: flex;
46  -webkit-box-pack: center;
47  -webkit-justify-content: center;
48      -ms-flex-pack: center;
49          justify-content: center;
50  -webkit-box-align: center;
51  -webkit-align-items: center;
52      -ms-flex-align: center;
53          align-items: center;
54  margin-top: 36px;
55}
56
57.nav .header-list {
58  display: -webkit-box;
59  display: -webkit-flex;
60  display: -ms-flexbox;
61  display: flex;
62  -webkit-box-pack: center;
63  -webkit-justify-content: center;
64      -ms-flex-pack: center;
65          justify-content: center;
66  -webkit-box-align: center;
67  -webkit-align-items: center;
68      -ms-flex-align: center;
69          align-items: center;
70}
71
72.nav .header-list .list-item {
73  text-transform: uppercase;
74}
75
76.nav .header-list .list-item + .list-item {
77  margin-left: 14px;
78}
79
80.nav .header-access {
81  display: -webkit-box;
82  display: -webkit-flex;
83  display: -ms-flexbox;
84  display: flex;
85  -webkit-box-pack: center;
86  -webkit-justify-content: center;
87      -ms-flex-pack: center;
88          justify-content: center;
89  -webkit-box-align: center;
90  -webkit-align-items: center;
91      -ms-flex-align: center;
92          align-items: center;
93  margin-left: 355px;
94}
95
96.nav .header-access .access-item {
97  margin-left: 14px;
98}
99
100.ec-display {
101  display: -webkit-box;
102  display: -webkit-flex;
103  display: -ms-flexbox;
104  display: flex;
105  -webkit-box-pack: center;
106  -webkit-justify-content: center;
107      -ms-flex-pack: center;
108          justify-content: center;
109  -webkit-box-align: center;
110  -webkit-align-items: center;
111      -ms-flex-align: center;
112          align-items: center;
113}
114
115.ec-display .ec-img {
116  max-width: 400px;
117  -webkit-flex-shrink: 0;
118      -ms-flex-negative: 0;
119          flex-shrink: 0;
120  height: 500px;
121  margin-top: 50px;
122}
123
124.ec-display .ec-about {
125  margin-left: 60px;
126}
127
128.ec-display .ec-about .ec-title {
129  height: 60px;
130  border-top: 1px solid #c3c3c3;
131  border-bottom: 1px solid #c3c3c3;
132  margin: 0 auto auto 60px;
133}
134
135.ec-display .ec-about .ec-title > p {
136  display: block;
137  padding: 18px;
138  text-align: center;
139  font-weight: bold;
140}
141
142.ec-display .ec-about > p {
143  display: block;
144  margin-top: 20px;
145  margin-bottom: 30px;
146}
147
148.ec-display .ec-about > span {
149  margin-bottom: 40px;
150}
151
152.order-table {
153  width: 100%;
154  margin-bottom: 20px;
155}
156
157.order-table > thead > th {
158  padding: 10px;
159  border-right: 1px solid #c3c3c3;
160}
161
162.order-table > thead > th .th:last-child {
163  border-right: none;
164}
165
166.order-table > thead .color, .order-table > thead .size {
167  padding: 10px;
168  width: 20%;
169  border-right: 1px solid #c3c3c3;
170  text-align: center;
171}
172
173.order-table > thead .quantity {
174  padding: 10px;
175  width: 60%;
176  text-align: center;
177}
178
179.order-table > tbody > tr > td {
180  text-align: center;
181  border-top: 1px solid #c3c3c3;
182  border-right: 1px solid #c3c3c3;
183}
184
185.order-table > tbody > tr > td > td:last-child {
186  border-right: none;
187}
188
189.order-table > tbody > tr > td > select {
190  width: 100%;
191  padding: 0 10px;
192  border: 1px solid #c3c3c3;
193  -moz-appearance: menulist;
194  /*ボタンダウン課題*/
195  -webkit-appearance: menulist;
196  /*ボタンダウン課題*/
197}
198
199.order-link {
200  background-color: #4B4B4B;
201  width: 100%;
202  height: 54px;
203  margin-bottom: 30px;
204}
205
206.order-link > a {
207  display: block;
208  text-align: center;
209  -webkit-box-align: center;
210  -webkit-align-items: center;
211      -ms-flex-align: center;
212          align-items: center;
213  text-transform: uppercase;
214  color: #fff;
215  line-height: 1;
216  padding: 18px 0;
217}
218
219/*サイズテーブル*/
220.size-table {
221  border: 1px solid #c3c3c3;
222  width: 100%;
223}
224
225.size-table > thead {
226  display: -webkit-box;
227  display: -webkit-flex;
228  display: -ms-flexbox;
229  display: flex;
230}
231
232.size-table > thead > tr {
233  background-color: #ECEBEB;
234}
235
236.size-table > thead > tr > th {
237  border-top: 1px solid #c3c3c3;
238  border-right: 1px solid #c3c3c3;
239}
240
241.size-table > thead > tr > th .size {
242  width: 16%;
243}
244
245.size-table > thead > tr > th .chest {
246  width: 28%;
247}
248
249.size-table > thead > tr > th .weist {
250  width: 28%;
251}
252
253.size-table > thead > tr > th .height {
254  width: 28%;
255}
256
257.size-table > tbody > tr {
258  text-align: center;
259  width: 100%;
260}
261
262.size-table > tbody > tr > th {
263  width: 16%;
264  border-right: 1px solid #c3c3c3;
265  border-bottom: 1px solid #c3c3c3;
266  padding: 10px 0;
267  text-align: center;
268}
269
270.size-table > tbody > tr > td {
271  border-right: 1px solid #c3c3c3;
272  border-bottom: 1px solid #c3c3c3;
273  padding: 10px 0;
274  text-align: center;
275}
276
277.footer {
278  padding: 10px 0;
279}
280
281.footer > p {
282  text-align: center;
283}
284/*# sourceMappingURL=style.css.map */

投稿2021/07/03 06:45

free_teku

総合スコア103

marlboro_tata

2021/07/03 13:15

.size-table > thead { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } を削除したら治りませんか？

free_teku

2021/07/03 14:08

治りました。ありがとうございます。m(__)m この解釈についてですが、trで囲っているので、display: flexする必要ないという解釈で間違ってないですか？

free_teku

2021/07/03 14:08

つい、縦に並んでしまったため、つい書いてしまった経緯があります。

marlboro_tata

2021/07/04 01:41

trで囲っているので、display: flexする必要ないその通りです。表組みの場合<tr>タグの中身は１行で横に並ぶのは仕様なので、displayプロパティをいじる必要がありません。HTMLのマークアップ間違いが縦に並んだ原因だったようですね。

free_teku

2021/07/04 05:08

ご丁寧にタテ並びの原因まで表記していただきありがとうございます。まだまだ至らない点があると改めて感じました！ありがとうございます！

marlboro_tata

2021/07/04 05:13

お力になれたなら何よりです。

free_teku

2021/07/04 07:16

度々すみません。新しく質問しようか迷いましたが、ルール規約で一度注意も受けたため、こちらで質問いたします。なお、別の質問です。レスポンシブです。 ↓一部のheader部分のコードです。結論：レスポンシブが反応しません。原因ついきゅうのため下記のサイト（https://www.beginnerweb.net/responsivetr.html）をみましたがどれもきちんとかいてあります。ですが、反応しなかったため、質問します。 .header{ max-width: 1140px; border-bottom: 1px solid #c3c3c3; margin: 0 auto 50px auto; //padding: 46px auto 26px auto; @include overTab{ .header{ margin-bottom: 0; border-bottom: none; margin: 26px 16px 16px 16px; } } } .nav{ display: flex; justify-content: center; align-items: center; margin-top: 36px; @include overTab{ .nav{ overflow-x: scroll; } } なぜ。レスポンシブされないのかご教授願います。

marlboro_tata

2021/07/04 07:51

ええと、teratailの質問ルールや規約に詳しくないのですが、別の質問なら別の質問を立てるべきだと思うので、ごめんなさいですが、この件についてはヒントだけにさせてください。ルール違反の片棒を担ぎたくないです。 @include overTab {} 内で、.header　や、.nav　をあらためて指示すると意味が違ってくるので、その部分を削除すると、少なくとも「反応しなかった」と言う状況は改善されると思います。それでも思うような結果が得られずわからない！と言う場合は、申し訳ありませんが、新たに質問を立てた方が良いと思います。助けてくれる方が現れますように・・・。

marlboro_tata

2021/07/04 07:52

蛇足ですが、scss記法での間違い探しには、 https://www.sassmeister.com が便利だと思っております（上記の件もこれで調べました）。連投、失礼いたしました。

free_teku

2021/07/04 08:49

marlboro_tataさん、大変申し訳ございません！！私の解釈が間違っていたようです。申し訳ございません。新しく質問しなおします。ご丁寧にご回答ありがとうございます。とても嬉しいです！！！

free_teku

2021/07/04 09:27

申し訳ございません。使い方だけでもサイト提示など可能でしょうか？色々調べたのですが、sassmeisteの使い方が出てきませんでした。もし、規定により無理だと場合は無視で構いません。この度は大変嬉しい回答と丁寧な対応でとても嬉しいです。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

表作成で一つの項目に複数が入っている原因

関連した質問