css - HTML table - can one indent occasional rows? -

i have customer production report produced in form of html table. customer additional detail on of report lines.

so existing report has lines like:

 +----------+-----+-----+-----+ | widget 1 | 123 | 456 | 789 | | widget 2 | 200 | 500 | 300 | | widget 3 | 555 | 222 | 999 | +----------+-----+-----+-----+ 

and want is:

 +----------+-----+-----+-----+ | widget 1 | 123 | 456 | 789 | | widget 2 | 200 | 500 | 300 | |     | 100 | 200 | 150 | |     |  75 | 250 | 100 | |   other  |  25 |  50 |  50 | | widget 3 | 555 | 222 | 999 | +----------+-----+-----+-----+ 

the lines this, that , other detail lines, should shown in distinctive (smaller) fonts. part have managed, getting these lines display indented (as shown) has been elusive.

the report used css elements td.item-heading , td.item-data format existing row headings , data. tried adding new td.detail-heading , td.detail-data, worked far reducing font sizes concerned, padding attribute not seem take effect. lines of css responsible are:

td.item-heading {font: 12pt "arial"; text-align: left} td.detail-heading {font: 10pt "arial"; text-align: left; padding 20px} 

why not give me 20px indent on detail lines compared item lines?