JQuery JQGrid - how to CSS right/left align without touching the grid lines?

Question

JQgrid outputs this html for a left aligned cell - but it is too hard to the left and touches the grid lines:

<td title="P-1" class="grid-text" style="text-align: left; width: 92px;" 
    role="gridcell">some text content</td>

How can I style that so that there is a little bit space on the left hand side?

I have tried:

.grid-text {
    text-align: left;
    margin-left: 4px; // padding-left didnt work either
}

But it is still hard to the left.

And on the other side, right aligned text also has the same problem: hard against the right and touching the grid line

<td title="1.37" class="grid-number" style="text-align: right; width: 55px;"
    role="gridcell">1.37</td>

And finally, when editing inline the input box also is hard to the right and touches the lines:

<td title="14.00" class="grid-number" style="text-align: right;" role="gridcell">
    <input type="text" style="width: 98%;" maxlength="20" id="2_qty" name="qty" 
           class="editable"></td>

Is there anything I can do to fix this? Preferably with a nice little bit of CSS?

Answer 1

Have you tried adding !important to your padding-left?

Do you have a page we can look at?