0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • Where is the "_padding that I specified_"? I see no styles for padding – zgood Dec 15 '16 at 18:21
  • You have successfully added a bottom border to your display looking at your fiddle. The border-bottom style 1px solid #C7CDD1 overrides anything previous. If you want a gap (padding) then you need to specify it in the TR style. – Tony Duffill Dec 15 '16 at 19:18
  • Hey Tony, .subscription-row is the class applied to my TR so isn't that the TR style your talking about? –  Dec 15 '16 at 20:05

1 Answers1

0

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>

Community
  • 1
  • 1
Edmund Wong
  • 16
  • 1
  • Your solution isn't working -- https://jsfiddle.net/z13jdLk5/1/ . Hover over the row and notice that the border appears under most of the row, but there are gaps to the far left and right. I would like the border to appear under the entire row. –  Dec 15 '16 at 20:07
  • Hi Natalia. The reason for the gaps to the far left and right is a combination of your border-width settings of 6px right 10px left, and also border-color: transparent. Your top, left, and right border has a transparent border with width settings, except for your bottom border which was overrided with your border-bottom style of 1px solid #C7CDD1. – Edmund Wong Dec 15 '16 at 20:50
  • In order to achieve what you probably wanted, you can set the right and left border-width to 0. – Edmund Wong Dec 15 '16 at 20:56
  • Hi, I want the padding to the left and right of the table row and I only want the border on the bottom so it is fine that it is transparent for the top and sides. Pretty hard question, huh? –  Dec 15 '16 at 21:15
  • In that case, you can just add padding-right and padding-left to .subscription-row td. Just make sure to adjust the border-width of your transparent top and side borders accordingly so it doesn't create unexpected gaps. – Edmund Wong Dec 15 '16 at 21:32
  • Alternatively, if you only want the border at the bottom, you can get rid of all the border styling and just use a pseudo selector to choose the last subscription-row and apply the bottom border. Example: .subscription-row:last-child { border-bottom: 1px solid #C7CDD1; } – Edmund Wong Dec 15 '16 at 21:39
  • If I apply padding right and left to the ".subscriptoin-row td" that will apply it to all the individual cells, which I don't want. I only want padding to the left and right of my row. Does that make sense? That is different than having padding to the right and left of each individual cell. –  Dec 15 '16 at 22:28
  • You can try ".subscription-row td:first-child { padding-left:10px; }" and then ".subscription-row td:last-child {padding-right:10px}". Basically, for the first td for a row, add left padding of 10px, then for the last td, add a right padding of 10px – Edmund Wong Dec 15 '16 at 23:20