Q&A
tableを中央に揃えたいです
現在HTMLを勉強中です。初心者です。
自分で調べてみましたがどうしても目的の答えが見つからないので質問させていただきます。
HTMLでtableを作りCSSで指定をしてきましが、
上段の"tableサンプル"枠の内側にtableが中央揃えに収まるようにできません。
どなたかご教授くださいますよう、お願いします。
tableが右寄せ?になる（現在）
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>About</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <h2>tableサンプル</h2> 11 <table> 12 <tr> 13 <th colspan="2" align="left">見出しが必要であればここを使います</th> 14 </tr> 15 16 <tr> 17 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 18 </tr> 19 20 <tr> 21 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 22 </tr> 23 24 <tr> 25 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 26 </tr> 27 28 <tr> 29 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 30 </tr> 31 32 <tr> 33 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 34 </tr> 35 36 <tr> 37 <td align="center"><span class="heading">見出し</span></td> <td>ここに説明など入れて下さい。サンプルテキスト。</td> 38 </tr> 39 </table> 40 <h2>当テンプレートについて</h2>
CSS
1 2table th{ 3 padding : 20px 10px; 4 border:solid 1px #999999; 5 background: #eeeeee; 6} 7 8table td{ 9 padding : 20px 10px; 10 border:solid 1px #aaaaaa; 11} 12 13table{ 14 width: 100%; 15 border-collapse: collapse; 16 padding: 10px 20px; 17 margin: 20px; 18 margin-bottom: 30px; 19} 20 21.heading{ 22 font-weight:bold;/*太字*/ 23 width: 100%; 24 padding: 10px 50px 10px 50px; 25}
試したこと
border-collapse: collapse;が原因かと思い消したら、一重線がなくなり隙間ができてしまいました。
完成イメージ（実現したいのがこれです）
回答1件
0
ベストアンサー
width: 100%; に対して左右マージン分を引いたらどうでしょうか。
css
1table{ 2 width: calc(100% - 40px); 3 border-collapse: collapse; 4 padding: 10px 20px; 5 margin: 20px; 6 margin-bottom: 30px; 7}
投稿2020/12/14 12:54
総合スコア33782
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/14 15:26
2020/12/15 00:34
2020/12/15 10:36 編集
2020/12/15 10:37
2020/12/15 10:51 編集