7

CSSのborder-spacingプロパティを使用して、このテーブルの画像をスペースで区切ってみようとしていますが、何らかの理由で機能していません。JSFiddleで画像がどのように結合されているかをここで確認できます：http：//jsfiddle.net/nKgnq/

代わりに画像の周りにパディングを入れてハッキングしようとしましたが、役に立ちませんでした。これらの写真をどのように分解できますか？

テーブルを生成するコードは次のとおりです。

<div class="table-right">
    <table class="fixed-height fixed-width fixed-cell">
        <tr>
            <td class="valigned"><h3 class="date">Details</h3>
                <?php the_field('details');?>
            </td>
            <td class="valigned">
                <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
                    <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
                </a>
            </td>
            <td class="valigned">
                <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
                    <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
                </a>
            </td>
            <td class="valigned">
                <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
                    <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
                </a>
            </td>
        </tr>
    </table>
</div>
4

2 に答える 2

16

cssborder-spacing:5pxでクラスに適用しtable-rightますが、適用したdivに含まれていても、テーブルはそれを使用しません。 

table { /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}

あなたのcssで、これはより具体的なセレクターであり、divから継承されたcssを上書きします。あなたがのようなクラスを作るなら

.table-spacing{
   border-spacing:5px;
}

あなたはそれをあなたのテーブルタグに適用することができます

<table class="fixed-height fixed-width fixed-cell table-spacing">

そしてそれは要求された方法で問題を解決するでしょう、私は思います

于 2013-02-21T05:55:46.507 に答える
0

jsFiddleを理解するのは本当に難しいですが、一般的に、1つの方法は<td>タグにパディングを付けることです。たとえばrightpadding、<td>追加のパディングが必要なタグにクラスを追加してから、CSSで定義します。

.rightpadding
{
    padding-right: 5px;
}

そして、あなたの<td>タグは次のようになります：

<td class="valigned rightpadding">
于 2013-02-21T02:59:35.737 に答える