Cell Padding Using CSS on an HTML Table

Question

I need to pad just one cell in my table. I gave the td element a class and defined the class in my CSS file like this

.itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; }

Padding-right does not seem to be doing anything.

Most likely some other rule has precedence. Have you checked the element with a debugger/DOM inspector such as Firebug? — RoToRa
– RoToRa, Commented Jul 13, 2010 at 15:32
Seems to be working for me in Firefox 3.6.6. For example, if I go to the link below and use Firebug to add that style to the Oranges' TD element and right align it, the entire left column becomes wider to accommodate the extra padding in that one cell, and the Orange text is aligned right, but spaced 30px from the right edge of it's cell due to the padding. I find it useful to experiment with styles in Firebug to rule out other interference. w3schools.com/html/html_tables.asp — AaronLS
– AaronLS, Commented Jul 13, 2010 at 15:36

Arizona1911 · Accepted Answer · 2010-07-13 15:32:04Z

2

I changed the css to

td.itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; }

Now it works.

answered Jul 13, 2010 at 15:32

2,2019 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

You probably need to read up on selector specificity: w3.org/TR/CSS2/cascade.html#specificity