web-dev-qa-db-ja.com

CSSまたはcellspacing属性のない<td>タグにマージンを配置できません

何らかの理由で、テーブルセルの間にマージンを確保することができませんでした。テーブルセルに灰色の背景色（白いページの背景の上）を持たせて、間に白のタイルのように見えるようにします。

HTMLで試しましたが、

<table cellspacing="3">

CSSでも、

table td {
    margin:3px;
}

何も動作しません。セルはまだ1つの大きな灰色の塊のようにくっついています。ここで非常に基本的なものが欠けていますか？

実際のコードは次のとおりです。

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>
htmlcsshtml-tablemargincellspacing
31
jeffkee

それでも誰かがこの問題を抱えている場合は、CSSスタイルシートでこれを試してください。

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

ボーダー間隔の値は、2つの長さの測定値です。水平方向の値が最初に来て、列の間に適用されます。 2番目の測定は行間に適用されます。

1つの値を指定すると、水平方向と垂直方向の両方で使用されます。デフォルト設定は0で、境界線はテーブルの内側のグリッドで2倍になります。

83
sebastian

スタイルシートの先頭でCSSリセットを使用している場合は、次のコードがあるかどうかを確認してください。

table {
  border-collapse: collapse;
}

その場合は、次で上書きしてみてください。

border-collapse: separate;
7
Sam Nabi

ブロック付きスタイルtdを作成します。これを試して、

<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}
4
Falah

cellspacingは、テーブルの背景色と同じ色をとると思います。
したがって、2つのオプションがあります。
1。 <table>自体ではなく、tdsに背景色を適用します。
2。白い境界線を使用することもできます（テーブルの<td>でborder-collapse: collapseにborderを使用）

0
Nivas

マージンを持たせたい2つのTDの間にtdを追加してみてください。背景を設定せず（「background：something;」と入力しないでください）、必要な幅に設定します。 2つのTRの間にマージンを配置する場合は、それらの間に別のtrを追加し、マージンに必要な高さのtdを配置します。 TDに同じクラスを使用して、CSSを1回だけ設定することもできます。

0
Breno