6

私のテーブルでは、テーブルセルとテーブル自体の間にスペースがないように、セル間のスペースのみを設定したいと考えています。ここに示すように、私のテーブル HTML は 2 列と 2 行です。

<table class="president-table" border="0">
    <tbody>
        <tr>
            <td>
                some text
            </td>
            <td>
                <img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <img src="images/kate-240x300.jpg" width="240" height="300" />
            </td>
        </tr>
    </tbody>
</table>

次のCSSを使用しました。

.president-table{
    border-collapse: separate;
    border-spacing: 15px 0px;
}

テーブルは次のようになります。

テーブルトップ

|TD TD|

|TD TD|

テーブルエンド

TD と TR の間にスペースはなく、各 2 つの TD の間だけです。提案？

4

4 に答える 4

8

border-spacing「内部」セル間だけでなく、各セルの周囲にスペースを追加するため、目的の効果を達成することはできません。

セルのパディングは、4 つの側面すべてでセルを成長させるため、機能しません。

CSS3が使えるならやってみる

table.test td:not(:last-child) { padding: 0 10px 0 0; }

CSS3 を使用していない場合は、各行の最後の TD 以外のすべてにスタイルを追加して、セルに右パディング (または左パディングのある最初の TD 以外) を与える必要があります。

注: テーブルはマージンを飲み込むため、セルの外側にスペースを取得する方法はありません (CSS も cellspacing 属性も持たない <td> タグにマージンを配置することはできません) 。

デモ。

于 2013-10-02T08:10:48.430 に答える
2

追加の HTML が少し必要になると思いますが、それほど悪くはありません。AaronDigulla が指摘したように、基本的な問題はcell-padding、単一のテーブル内のセルに対して個別に設定できないことです。この問題を回避するには、余分な要素を使用して、代わりにスタイルを設定します。

<tr>
    <td>Cell</td>
    <td>
        <div class="mid_col">Cell</div>
    </td>
    <td>Cell</td>
</tr>

これで、セルのパディング/スペースはまったく必要ありません.mid_col。div のスタイルを設定するだけでレースに出かけることができます。

/* No spacing on the cells */
table{
    border-collapse: collapse;
    border-spacing: 0px;
}

/* General cell styling - also styling the new divs to match */
.mid_col,
td {
    padding: 12px;
}

/* This takes the vertical spacing off of the tds holding the new divs
       It also sets the space between each column (here 25px) */
td:nth-of-type(2){
    padding:0px 25px;
}

http://jsfiddle.net/daCrosby/7JufT/77/

于 2013-10-02T08:47:54.117 に答える
0

ライブデモ

これを試してみてください。問題が解決することを願っています。

HTML:

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

CSS:

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing = '10px');
}
于 2013-10-02T07:32:50.363 に答える
-1

これはそれを行います：

.president-table{
    border-collapse: separate;
    border-spacing: 15px 15px; /* notice the second 15px '/
}

また、最初のタグで、src および class 属性に引用符 "" を間違って設定しています。

これは、それがどのように見えるかです

<img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
于 2013-10-02T07:41:14.157 に答える