Question

我们在桌子上排列的项目没有边框或填充。每个第一行包含一个图形，紧接下面的行是空白或包含免责声明的锚链接。链接应该更靠近它正上方的图形，但仍然存在很大的差距。

如何格式化表格以使图形和免责声明链接更接近？

这是我正在处理的网页的链接：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>

Answer 1

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

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

5px右侧填充适用于.fruitboxDeliveryForm table.customer td, .simpleForm td

将它们删除或设置为0可能有助于您实现它。

Answer 2

您将填充设置为10px：

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

将其移除，看起来不错。

或者您可以在 .cpMain td 类中创建类

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

并将此类添加到html中的css类列表中：

<table class="table-no-padding">  </table>

Answer 3

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

使用像firebug这样的工具还会显示应用样式的来源

使用CSS根据需要设置样式。：Set cellpadding and cellspacing in CSS?

Answer 4

在锚点的每个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>

希望它有所帮助：）

格式化表格使行更加靠近

4 个答案: