Why isn't the padding taking effect in my table row? - html

Question

I’m trying to get some padding around data in my table row, whose HTML is the following …
<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"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></td>
</tr>
I applied this style …
.subscription-row {
min-height: 30px;
border-top-width: 0;
border-radius: 0;
border-bottom: 1px solid #C7CDD1;
padding: 12px 6px 12px 10px;
box-sizing: border-box;
}
.subscription-row img, .subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
but there is still not any padding in around the data in my table row. Here is the Fiddle illustrating this — https://jsfiddle.net/77zhfe27/ . How can I get the padding to appear?

Answer 1

You need to apply the padding to the td element.
<style>
td {
padding: 12px 6px 12px 10px;
}
</style>

Answer 2

padding doesn't work on rows.
A often used work-around is to set padding to the cells td, though one get a similar effect using border-spacing on the table.
The down side though, with both, is that you get the space in between the cells as well, so as a work-around, if one really need it on the row, is to either nest a table in a table, or as in below sample, use the row's border to create a padding effect
Note, that the table need border-collpase: collapse for styles to apply on a tr
table {
border-collapse: collapse;
}
table tbody tr:hover {
background-color: cyan
}
.subscription-row {
min-height: 30px;
border-color: transparent;
border-style: solid;
border-width: 12px 6px 12px 10px
}
.subscription-row td {
border-bottom: 1px solid #C7CDD1;
}
.subscription-row img,
.subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-weight: bold;
}
<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>

Answer 3

I modified your Fiddle and it appears to work: https://jsfiddle.net/77zhfe27/3/
Key code change is here. Showing emphasis with the large padding (20px).
table#subscriptions-table tr td{
padding:20px;
}
This lets you choose the table with your ID and drill down to what is essentially the row (tr) and cell (td). You could be more global and effect all tables like this:
table tr td{
padding:20px;
}
Then override as needed with individual table classes or ids.
Also: Bob (another post here) gave a better example of setting padding for each side (top right bottom left) with his use of padding:6px 12px 6px 12px; That works too, otherwise setting one value will set that for ALL sides. Doing something like padding:6px 12px; will set top/bottom to 6px and right/left to 12px.
Hope it helps!