1

我们在没有边框或填充的表格中排列了一个项目。每个第一行都包含一个图形，而紧随其后的行是空白的或包含指向免责声明的锚链接。链接应该更靠近其正上方的图形，但仍有很大差距。

我可以做些什么来格式化表格，以便图形和免责声明链接可以更接近？

这是我正在处理的页面的链接： http: //edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx

这是代码示例：（取自底部第三行）

    <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

这通常是在您未定义cellspacing=0和cellpadding=0编写table标签时引起的。请检查一下。

在您的代码中，我可以看到您已将 10px 填充应用于该类.cpMain td

并且 5px 右填充应用于.fruitboxDeliveryForm table.customer td, .simpleForm td

将它们删除或设置为 0 这些可能会帮助您实现它。

于 2013-09-19T04:49:07.247 回答
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

浏览器对每个元素都有默认显示。您可以使用 firebug for firfox 之类的工具来检查元素并查看它们对自己的用途。如果您没有明确设置样式，则将使用默认样式。

使用 firebug 之类的工具还会向您显示应用样式的来源

根据需要使用 CSS 设置样式。:在 CSS 中设置 cellpadding 和 cellspacing？

于 2013-09-19T04:53:45.467 回答
0

在 anchore 的每个 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 回答