0

我有一个table我不想设置padding&/或margin在每个td单元格之间应用一些间距，第一个答案是使用CellSpacing和/或CellPadding属性table但是当我使用这些属性时，它们会在每一侧应用空间（即顶部、底部、左侧和右侧）但我只想在顶部和底部应用空间。

我的问题有什么解决办法吗？

4

5 回答 5

0

使用空行作为间距

请参阅下面的示例

 <table class="style1">
        <tr style="height: 20px;">
            <td>
                sfgefgfeg</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
        <tr style="height: 5px;" >
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr style="height: 20px;">
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
        <tr style="height: 20px;">
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
    </table>

这里添加了高度为 5px 的行作为间距。

于 2012-07-10T13:42:37.823 回答
0

您可以在 TD 元素上使用border-top 和border-bottom 并使边框的颜色与页面的背景颜色相同。

于 2012-07-10T13:47:36.720 回答
0

您始终可以使用paddingwith<td>在表格单元格的顶部和底部留出空间。

要在表格行之间添加间距，请设置<tr>为block元素，然后您可以margin在其上使用属性。

在此处查看演示http://codepen.io/pen/10248/2

编辑：

更新为包含行之间的间距。

于 2012-07-10T13:40:47.550 回答
0

在单元格之间创建间距的替代方法（如果单元格有边框，则间距出现在边框之间）是在 HTMLcellspacing中的元素上使用属性并在 CSS 中使用属性。前者受到问题中提到的不灵活的影响。后者对浏览器的支持有限。您可以同时使用这两种方式，以便较旧的浏览器使用简单的 HTML 间距，而较新的浏览器则使用 CSS 方式。tableborder-spacing

下面的示例设置了 0.5em 的垂直间距（即行间）和较小的 0.1em 水平间距（即列间）。

table { border-spacing: 0.1em 0.3em; }

（顺序与 CSS 属性值中的通常顺序不同：这里先是水平，然后是垂直，而在边距：0.1em 0.3m 中则应用相反的顺序。）

于 2012-07-10T14:42:52.390 回答
0

您可以通过添加来模拟间距border-bottom: 3px solid #fff（根据需要更改颜色，顶部相同）

于 2012-07-10T13:58:01.833 回答