66

背景が色付きのテーブルがあり、テーブルとそのコンテンツであるIEセルの間のパディングを指定する必要があります。
テーブルタグはパディング値を受け入れていないようです。
Firebugは、パディング0でテーブルとtbodyのレイアウトを表示しますが、入力された値を受け入れないため、パディングプロパティがないだけだと思います。
ただし、テーブルの上部にある上部のセルとテーブルの下部にある下部のセルと同じようにセルを分離する必要があります。
繰り返しますが、私が欲しいのはセルパディングではありません。

編集：ありがとう、私が本当に必要としていたのは、ボーダースペース、またはそれに相当するhtmlのセルスペースでした。
しかし、何らかの理由で、彼らは私が取り組んでいるサイトでは何もしません。
どちらも別のHTMLでうまく機能しますが、サイトでは機能しません。
プロパティを上書きするスタイルかもしれないと思いましたが、セル間隔とインライン境界間隔は上書きされるべきではありませんか？
（私はFirefoxを使用しています）

編集2：いいえ、TDパディングは私が必要とするものではありません。TDパディングを使用すると、隣接するセルの上部と下部のパディングが合計されるため、2つのセルの間には、上部のセルとテーブルの上部の境界線の間の2倍のスペース（実​​際にはパッド）があります。それらの間の距離をまったく同じにしたいのです。

4

12 に答える 12

51

最も簡単でサポートされている方法は、使用することです<table cellspacing="10">

CSS の方法: border-spacing (IE ではサポートされていないと思います)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

編集：セルのコンテンツをパディングしたいだけで、スペースを空けない場合は、単に使用できます

<table cellpadding="10">

また

td {
    padding: 10px;
}
于 2009-11-17T18:30:50.570 に答える
26

テーブルにマージンを設定できます。または、テーブルをdivでラップし、divのパディングを使用します。

于 2009-11-17T18:04:14.867 に答える
26

テーブルについて理解しておくべきことは次のとおりです...テーブルは、ネストされた独立した要素のツリーではありません。それらは単一の複合要素です。個々の TD は多かれ少なかれ CSS ブロック要素のように動作しますが、中間のもの (TR と TBODY を含む、TABLE と TD の間のもの) は分割できず、inlineにもblockにも分類されません。その異次元空間ではランダムな HTML 要素は許可されず、そのような異次元空間のサイズは CSS でまったく構成できません。HTMLcellspacingプロパティだけがそれに到達することさえでき、そのプロパティは CSS に類似物がありません。

したがって、問題を解決するには、別のポスターが示唆するように DIV ラッパーを提案するか、絶対にテーブルに含めておく必要がある場合は、この醜いジャンクを持っていることをお勧めします。

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>
于 2009-11-19T06:21:39.977 に答える
6

あなたはできません...多分あなたが望む効果の写真を投稿したなら、それを達成する別の方法があります。

たとえば、テーブル全体をDIVでラップし、パディングをdivに設定できます。

于 2009-11-17T18:03:10.427 に答える
6

おかしなことに、私は昨日まさにこれをしていました。cssファイルでこれが必要です

.ablock table td {
     padding:5px;
}

次に、テーブルを適切な div でラップします

<div class="ablock ">
<table>
  <tr>
    <td>
于 2009-11-17T18:12:20.427 に答える
3

別のトリックがあります：

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

（今の職場で見ました）

于 2016-04-21T17:43:17.310 に答える
3

css を使用すると、セルとは別にテーブルにパディングを設定できます。

padding プロパティは、その子には継承されません。

したがって、次のように定義します。

table {
    padding: 5px;
}

動作するはずです。また、セルにパディングする (この場合はパディングしない) 方法をブラウザに具体的に伝えることもできます。

td {
    padding: 0px;
}

編集: IE8 ではサポートされていません。ごめん。

于 2009-11-17T18:25:02.407 に答える
1

border-spacingプロパティを試すことができます。それはあなたが望むことをするはずです。しかし、あなたはこの答えを見たいかもしれません。

于 2009-11-17T18:02:29.223 に答える
1

CSS では、実際にはテーブル レベルでこれを行うことはできません。通常、cellspacing="3"この効果を実現するタイミングを指定します。明らかにCSSソリューションではないので、価値があると考えてください。

于 2009-11-17T18:19:34.260 に答える
1 
table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

Firefox、Chrome、IE11、Edge で動作します。

于 2019-09-09T00:31:32.787 に答える
0 
table {
    border: 1px solid transparent;
}
于 2015-03-25T04:40:38.343 に答える
0 
table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}
于 2016-11-11T05:55:55.983 に答える