38

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

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>
4

7 に答える 7

94

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

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

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

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

于 2011-04-14T18:04:11.990 に答える
7

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

table {
  border-collapse: collapse;
}

その場合は、次のコマンドでオーバーライドしてみてください。

border-collapse: separate;
于 2010-12-09T10:31:05.053 に答える
4

make style td with block. Try this, 

<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;
}
于 2016-05-02T05:11:02.310 に答える
0

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

于 2010-12-09T10:48:05.993 に答える
-1

Try adding a td between the two TDs you want to have the margin. Set it to have no background (just don't put "background:something;") and to have the width you want. If you want to put a margin between two TRs, just add another tr between them and put a td with the height you want the margin to have. You can even use the same class for the TDs and set the CSS only once.

于 2014-08-16T14:20:18.873 に答える
-2

だから私は問題なく問題を解決する簡単な方法を見つけました

あなたが持っているとしましょう

<tr><td>This is an example</td></tr>

データ全体をカプセル化する

このようなタグ

<tr><td><p>This is an example</p></td></tr>

そして、

必要な値の左マージンにタグを付けます。

<tr><td><p style="margin-left:4px;">This is an example</p></td></tr>

それは面倒なことなく私のために魔法をします

于 2013-05-18T17:18:54.347 に答える
-3

これは大まかな修正ですが、機能します。

同じ背景または色を使用して、既存のを含む必要なサイズの余白を作成する場合<table>は、外側のテーブルの余白を希望どおりに設定できます。

一連の<TD>要素がある場合は、余白を付けたい<table>内側を作成し、外側と内側の両方が同じ背景または色であることを確認します。<TD><table><TD>

引用を表示するスクリプトを埋め込んだhtt ​​p://harrolds.blogspot.comの私のブログの例...

メインテーブル：

<table width="100%" bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&amp;hl=en&amp;fs=1&amp;border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators &amp; Defenders</small></b></a></span></font> 
    </td>

    <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
      <table border=0>
        <tr>
          <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
          </td>
        </tr>
      </table>
    </td>

    <td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source  http://www.cafepress.com/rightwingstuff" border="0" /></a>
    </td>
  </tr>
</tbody>
</table>
于 2011-08-22T04:44:10.970 に答える