时间戳

首页 > 解决方案 > 增加表中每 2 行之间的间隙

html - 增加表中每 2 行之间的间隙

问题描述

当我使用以下代码时：

HTML

<table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
</table>

CSS

table {
    border-collapse: separate;
    border-spacing: 0 1rem;
    width: 100%;
}

我得到以下输出：

在此处输入图像描述

但我需要的输出是：

在此处输入图像描述

尝试使用表 tr 的边距 ..但没有变化。

谢谢..！！！

标签： htmlcssangular

解决方案

您可以使用:nth-child()伪类，每 2 个元素的值为2n+1 ：

:nth-child(2n+1)

事实上，您只能在table标签 -中设置表格中的间隙border-spacing。在我看来，使用 amargin和 a是不礼貌的。display: block

对于行之间的间隙，我应用了 rule border-top，赋予边框currentColor颜色。

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

table tr {
    background-color: blueviolet;
    color: white;
}

table tbody tr:nth-child(2n + 1) {
    border-top: 25px solid currentColor;
}
<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
    </tbody>
</table>

推荐阅读