无法让边框出现在我的 table 行的底部

Question

我试图在我的 table 行中填充并为我的行设置底部边框。所以我有：

.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;
    }

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

查看此处以了解有关您当前问题的更多信息 >> Add border-bottom to table row <tr>

无法让边框出现在我的 table 行的底部

Having trouble getting a border to appear at the bottom of my table row

html

css

html-table

border