Trying to get numbers right aligned with right padding in a cell - css

Question

I am trying to get the following effect where numerical entries in cells are right aligned but with 25px of right padding.
For some reason, I can't seem to override a setting of padding: 1 in my template.
The numbers end up without the padding-right. (what you see in the sample above was the result of tweaking the CSS in Inspect as described below)
The view code is
<div class="field">
<td><%= :number_of_rolls_fill %></td>
<span class="number_right"> <td><%= #bedsheet_line.number_of_rolls_fill %></td></span>
</div>
</tr>
The css in application.css (which rails uses for custom css in addition to the template)
.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
I've tried a number of variations on this.
If I do an inspect I found that if I uncheck the padding: 1px in BOTH areas indicated I will get the effect I want.
My style sheet has
.art-article th, .art-article td
{
padding: 1px !important;
vertical-align: top;
text-align: left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 1px !important;
}
pre
{
overflow: auto;
padding: 0.1em;
}
.preview-cms-logo
{
border: 0;
margin: 1em 1em 0 0;
float: left;
I could probably get the effect I want by changing my style sheet but I that would cause issues in other areas of the app.

Answer 1

Here is a working sample that is close to your current code. It uses your css and modifies the view only.
/* css */
td.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
# view
<tr>
<td><%= :number_of_rolls_fill %></td>
<td class="number_right"><%= #bedsheet_line.number_of_rolls_fill %></td>
</tr>
Here is a jsfiddle showing the result.
You can get rid of the <div class="field"> and the <span class="number_right"> and apply the number_right class directly to your table cell. The syntax wasn't pretty before so this will clean that up. Also, if you moved the span inside the table cell you'd have to set width or display: block; to get it to align properly.
example with span inside the td:
/* css */
td span.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
display: block;
}
# view
<td><span class="number_right">$80</span></td>

Answer 2

You need to target that element specifically:
.art-article td .number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
Also, the span should be inside the <td> element:
<td><span class="number_right"> <%= #bedsheet_line.number_of_rolls_fill %></span></td>