前提・実現したいこと
テーブル要素で表を作成した際、リスト内の項目全てを上下中央寄せにしたい
発生している問題・エラーメッセージ
上下中央寄せにならない
該当のソースコード
html
1<div class="scroll-table"> 2 <table class="tbl-r02"> 3 <tbody> 4 <tr> 5 <th class="fixed01">名</th> 6 <th>無料プラン</th> 7 <th>料金</th> 8 <th>固定費</th> 9 <th>費用</th> 10 <th>サービス</th> 11 <th>地域</th> 12 </tr> 13 <tr> 14 <th class="fixed01">あああああ</th> 15 <td>あああああ</td> 16 <td>あああああああああああああああああああああああああああああ</td> 17 <td>あああああ</td> 18 <td>あああああ</td> 19 <td>あああああ</td> 20 <td>あああああ</td> 21 </tr> 22 <tr> 23 <th class="fixed01">あああああ</th> 24 <td>あああああ</td> 25 <td>あああああ</td> 26 <td>あああああ</td> 27 <td>あああああ</td> 28 <td>あああああ</td> 29 <td>あああああ</td> 30 </tr> 31 <tr> 32 <th class="fixed01">あああああ</th> 33 <td>あああああ</td> 34 <td>あああああ</td> 35 <td>あああああ</td> 36 <td>あああああ</td> 37 <td>あああああ</td> 38 <td>あああああ</td> 39 </tr> 40 <tr> 41 <th class="fixed01">あああああ</th> 42 <td>あああああ</td> 43 <td>あああああ</td> 44 <td>あああああああああああああああああああ</td> 45 <td>あああああ</td> 46 <td>あああああ</td> 47 <td>あああああ</td> 48 </tr> 49 <tr> 50 <th class="fixed01">あああああ</th> 51 <td>あああああ</td> 52 <td>あああああ</td> 53 <td>あああああ</td> 54 <td>あああああ</td> 55 <td>あああああ</td> 56 <td>あああああ</td> 57 </tr> 58 <tr> 59 <th class="fixed01">あああああ</th> 60 <td>あああああ</td> 61 <td>あああああ</td> 62 <td>あああああ</td> 63 <td>あああああ</td> 64 <td>あああああ</td> 65 <td>あああああ</td> 66 </tr> 67 <tr> 68 <th class="fixed01">あああああ</th> 69 <td>あああああ</td> 70 <td>あああああ</td> 71 <td>あああああ</td> 72 <td>あああああ</td> 73 <td>あああああ</td> 74 <td>あああああ</td> 75 </tr> 76 <tr> 77 <th class="fixed01">あああああ</th> 78 <td>あああああ</td> 79 <td>あああああ</td> 80 <td>あああああ</td> 81 <td>あああああ</td> 82 <td>あああああ</td> 83 <td>あああああ</td> 84 </tr> 85 <tr> 86 <th class="fixed01">あああああ</th> 87 <td>あああああ</td> 88 <td>あああああ</td> 89 <td>あああああ</td> 90 <td>あああああ</td> 91 <td>あああああ</td> 92 <td>あああああ</td> 93 </tr> 94 </tbody> 95 </table> 96</div>
css
1.tbl-r02 { 2 margin: 20px auto; 3} 4table { 5 border-top: solid 1px #e6e6e6; 6 font-size: 93.8%; 7 margin: 0 0 1.6em; 8 width: 100%; 9} 10table { 11 border-collapse: collapse; 12 border-spacing: 0; 13} 14 .tbl-r02 a { 15 color: #ffffff; 16 } 17 18.tbl-r02 { 19 margin: 20px auto; 20 } 21 .tbl-r02 th { 22 background: #33bad4; 23 color: #fff; 24 padding: 10px; 25 font-size: 13px; 26 text-align: center; 27 border: solid 1px #e6e6e6 28 } 29 30 .tbl-r02 tr:nth-child(even) td { 31 background: #f5f5f5; 32} 33 34 .tbl-r02 td { 35 padding: 10px; 36 border: solid 1px #e6e6e6 37 } 38 39 @media screen and (max-width: 640px) { 40 .last td:last-child { 41 width: 100%; 42 } 43 44 .tbl-r02 th, 45 .tbl-r02 td { 46 border-bottom: none; 47 } 48 } 49 50 51 .tbl-r02-nomal { 52 margin: 20px auto; 53 } 54 .tbl-r02-nomal th { 55 background: #33bad4; 56 color: #fff; 57 padding: 10px; 58 font-size: 13px; 59 text-align: center; 60 border: solid 1px #e6e6e6 61 } 62 63 .tbl-r02-nomal td { 64 padding: 10px; 65 border: solid 1px #e6e6e6 66 } 67 68 @media screen and (max-width: 640px) { 69 .last td:last-child { 70 width: 100%; 71 } 72 73 .tbl-r02-nomal th, 74 .tbl-r02-nomal td { 75 border-bottom: none; 76 } 77 }
試したこと
margin:0 auto
text-align:center;
table-layout:fixed
よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/02/15 06:43