Question

我正在尝试在表格行中填充并为我的行设置一个底部边框。所以我有：

.subscription-row {
    background-color: cyan;
    min-height: 30px;
    border-color: transparent;
    border-style: solid;
    border-width: 22px 16px 42px 20px; 
    border-bottom: 1px solid #C7CDD1;
}

关于此HTML

<table id="subscriptions-table">
    <thead>
        <tr>
            <th>Subscription</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even subscription-row header">
                <td class="ig-header-title ellipsis">
                <img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
                <a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
            </td>  
            <td align="center"><a href="/scenarios/18/download"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></a></td>
        </tr> 
    </tbody>
</table>

但是底部边框没有显示距离填充的所需像素数 - https://jsfiddle.net/z13jdLk5/。如何在确保我指定的适当数量的填充的同时强制我的实心边框在我的行底部？

Answer 1

您可以通过定位订阅行中的td并添加一些填充来实现填充。

    .subscription-row td {
        padding-bottom:10px;
    }

请注意，如果您将当前的订阅行类用于后续的行样式，则看起来好像只有最底部的行将具有您期望它具有的透明行颜色。这是因为行边框的顶部有一个透明的边框样式，它覆盖了前一行的底部边框样式。

通过此处了解有关当前问题的更多信息＆gt;＆gt; Add border-bottom to table row <tr>

无法将边框显示在表格行的底部

1 个答案: