1

ボーダーやパディングのないテーブルに項目が並んでいます。最初の各行にはグラフィックが含まれており、そのすぐ下の行は空白であるか、免責事項へのアンカー リンクが含まれています。リンクはそのすぐ上のグラフィックに近いはずですが、それでも大きなギャップがあります。

グラフィックと免責事項のリンクが近くなるように表をフォーマットするにはどうすればよいですか?

これは私が取り組んでいるページへのリンクです: http://edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx

コードのサンプルを次に示します (これは下から 3 行目から取得したものです)。

    <tr>
        <td>
            <span style="font-size: 14px;"><a href="http://www.tenya.co.jp/index.htm" target="_blank"><img alt="てんや" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo35-(1).gif.aspx" style="width: 160px; height: 48px;" title="てんや" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.kisoji.co.jp/torikaku/" target="_blank"><img alt="とりかく" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo36-(1).gif.aspx" style="width: 160px; height: 48px;" title="とりかく" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.gankofood.co.jp/group/tonkatsu/" target="_blank"><img alt="とんかつがんこ" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo37-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつがんこ" /></a></span></td>
        <td>
            <span style="font-size: 14px;"><a href="http://www.hamakatsu.jp/" target="_blank"><img alt="とんかつ浜勝" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo38-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつ浜勝" /></a></span></td>
    </tr>
    <tr>
        <td style="text-align: right; vertical-align: top;">
            <span style="font-size:14px;"><a href="#a01">※1</a></span></td>
        <td style="text-align: right; vertical-align: top;">
            <span style="font-size:14px;"><a href="#a01">※1</a></span></td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
4

4 に答える 4

3

パディングが 10px に設定されています。

.cpMain td {
    vertical-align: top;
    padding: 10px; // play with it, change to padding: 0px for the beginning
    width: 220px;
}

それを取り除くと見栄えが良くなります。

または、.cpMain tdクラスの下にcss クラスを作成できます。

.table-no-padding td {
    padding: 0px;
}

このクラスを html の css クラスのリストに追加します。

<table class="table-no-padding">
    <!-- td content -->
</table>
于 2013-09-19T04:53:59.100 に答える
1

ブラウザには、すべての要素のデフォルト表示があります。firfox の firebug のようなツールを使用して、要素を検査し、それらが何であるかを自分で確認できます。スタイルを明示的に設定しない場合、デフォルトが使用されます。

firebug のようなツールを使用すると、適用されたスタイルがどこから来ているかも表示されます

CSS を使用して、必要に応じてスタイルを設定します。: CSS で cellpadding と cellspacing を設定しますか?

于 2013-09-19T04:53:45.467 に答える
0

アンカレの各 td で、padding-top を 0 に設定します。

padding-top="0px"

例えば

<td style="text-align: right; vertical-align: top;padding-top:0px;">
                <span style="font-size: 14px;"><a href="#a08">※8</a></span></td>

それが役に立てば幸い ：）

于 2013-09-19T04:52:59.190 に答える