CSSの表のセルの背景色の周りに空白を追加するには

Question

CSSの表のセルの背景色の周りに空白を追加するにはどうすればよいですか？私はこれを持っていますが、背景色は端までずっと行きます。コンテンツの埋め込みは機能しているように見えますが、背景色は機能していません。

#main-monitor { 
    width: 100%; 
} 

#main-monitor td, #main-monitor th { 
    border: 3px solid #999; 
    padding: 4px; 
} 

編集：ここではこれらの作品に重要な私の完全なCSSです。私はいくつかの更新を行ったが、同じ問題がまだ残っている。

#main-monitor { 
    width: 100%; 
} 

#main-monitor th { 
    border: 3px solid #999; 
    padding: 3px; 
    text-align: center; 
    padding-top: 12px; 
    padding-bottom: 12px; 
} 
#main-monitor td { 
    background-color: white; 
    border: 3px solid #999; 
    margin: 2px; 

} 
#main-monitor td span { 
    margin: 5px; 
} 

この部分ビューでテーブルに適用されています：

<table id="main-monitor"> 
    <thead> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(m => m.Name) 
      </th> 
      <th> 
       @Html.DisplayNameFor(m => m.A) 
      </th> 
      <th> 
       @Html.DisplayNameFor(m => m.B) 
      </th> 
      <th> 
       @Html.DisplayNameFor(m => m.C) 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
       @foreach (var item in Model) 
       { 
        <tr> 
         <td>@item.Name</td> 
         <td style="background-color:@item.AColor"><span>@item.A</span></td> 
         <td style="background-color:@item.BColor"><span>@item.B</span></td> 
         <td style="background-color:@item.CColor">@item.C</td> 
        </tr> 
       } 
    </tbody> 
</table> 

Answer 1

ます。また、これを試すことができます。

1. スパンにテーブルのテキストを書き込み、スタイルを適用します。

HTML

<table> 
    <tr> 
    <td><span>Hello</span></td> 
    </tr> 
</table> 

CSS

td{ 
    border: 1px Solid Black; 
    background-color: white; 
} 
td span{ 
    background-color: blue; 
    margin: 5px; 
} 

を参照してくださいthis

Answer 2

ソリューション1

"Advait S" で述べたように、あなたはここでtableタグ

ためborder-spacing CSSルールを使用することができる実用的な例である

td { 
 
    background: red; 
 
} 
 

 
table { 
 
    border-spacing: 10px; 
 
}

<table> 
 
    <tr> 
 
    <td><span>xxx</span></td> 
 
    <td><span>xxx</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span>xxx</span></td> 
 
    <td><span>xxx</span></td> 
 
    </tr> 
 
</table>

ソリューション2

解決策1にもかかわらず、エレガントです。あなたは

---

関連する質問

• 4 divのバックグラウンドイメージをページ長よりも長く繰り返す方法はありますか？
• -1 ページのテキスト領域が大きすぎますか？

---

人気のある質問

• 182 AlarmManagerに既にアラームが設定されているかどうかを確認する方法は？
• 159 リストをクリアするさまざまな方法
• 100 非標準ポートのリモートリポジトリを使用する
• 68 package.jsonで未使用のnpmパッケージを見つける
• 66 私はそうのようなウィンドウ内の要素の位置を取得しようとしている要素
• 65 グローバル機能とデバイス機能の違い
• 58 クラスが定義されているかどうかを確認するにはどうすればいいですか？
• 40 RubyMine通知をGrowlに送信するには？
• 37 constで非const型にキャストする
• 37 JSONとBSONの比較

2019 stackoverrun.com

Licensed under cc by-sa 3.0 with attribution required.

お問い合わせ

×

メッセージが送信されました！

閉じる 送信

td{ 
 
background:red; 
 
margin:10px; 
 
display:inline-block; 
 
}

<table> 
 
    <tr> 
 
    <td><span>xxx</span></td> 
 
    <td><span>xxx</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span>xxx</span></td> 
 
    <td><span>xxx</span></td> 
 
    </tr> 
 
</table>

に国境の間隔を使用してみました