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

Question

I'm trying to have padding within my table row and have a bottom border for my row. So I have:

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

on this 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>

but the bottom border is not showing up the desired number of pixels away from the padding — https://jsfiddle.net/z13jdLk5/ . How can I force my solid border on the bottom of my row only while ensuring the appropriate amount of padding that I specified?

Answer 1

You can achieve padding by targeting the td inside of the subscription-row, and adding some padding to it.

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

Do note that if you use your current subscription-row class for your subsequent row styling, it will look as if only the bottom-most row will have the transparent row color you expected it to have. That is because the top of the row border has a transparent border styling which overwrites the previous row's bottom border styling.

Look here to understand more about your current problem >> Add border-bottom to table row <tr>