3

私はこのようなテーブルを持っています（htmlで）：

<div id="product_grid_one">
  <table>
    <tr>
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
    </tr>              
  </table>
</div>

そしてここにそれのためのCSSがあります：

td { width: px; padding: 14px; border: 1px solid #c0c0c0; margin: 14px; }

基本的に、4つのセルを持つ1つの行があります。各セルには、縦に積み重ねられた画像、製品の説明文、および製品価格があります。さて、このスリーピーススタックの周りに、td要素（ブロックとして扱うことができると思います）に14pxのパディングを持たせたいのですが、これは問題なく設定できるので、14px離れた1pxの境界線があります。画像、テキスト、価格のスタック。ここまでは問題ありません。

問題は、上記ではマージンが設定されていないことです!! @

マージンを設定できます：200px; それでも違いはありません。マージンは約1または2ピクセルであり、これを変更することはできないようです。そして私はFirefox13.0.1でこれを試しました。

では、どうすればマージンを設定できますか？テーブルの各tdの間に14ピクセルを配置したいと思います。

これはCSSで達成できますか？

テーブルのcellspacing属性を使用することをお勧めします。したがって、次の同等のCSSを利用できます。

table { border-collapse: separate; border-spacing: 14px; }

しかし、これは私には良くありません。テーブルの内側にのみ境界線の間隔を適用したいからです。テーブル全体の両側（左または右）に間隔を空けたくありません。解決策はありますか？

さて、ようやく解決策にたどり着くことができました。負のマージンで問題を解決し、テーブルがテーブルの周囲に（さまざまなテーブルデータとテーブルヘッダーの間に加えて）追加する境界線の間隔が、左に移動したときに表示されないようにしました。負の値の左マージンを利用します。

table { border-collapse: separate; border-spacing: 13px; margin-left: -13px; }
4

1 に答える 1

1

確認してもらえますか

.style { border-spacing: 0px; }

違いはありますか？恐竜が地球を歩いたとき、彼らは使用しました

<td cellspacing="0">

しかし、今日そうすると、同僚の誰かがあなたをばかげて叩きます。もしそうなら、おそらく非推奨のもののリストへのリンクを提供するでしょう。

于 2012-07-17T17:41:07.780 に答える