我有一份客户生产报告，该报告以 HTML表格的形式生成。客户现在可以在某些报告行上获得一些其他详细信息。
因此，现有报告的行如下所示：
+----------+-----+-----+-----+ | Widget 1 | 123 | 456 | 789 | | Widget 2 | 200 | 500 | 300 | | Widget 3 | 555 | 222 | 999 | +----------+-----+-----+-----+
他们现在想要的是：
+----------+-----+-----+-----+ | Widget 1 | 123 | 456 | 789 | | Widget 2 | 200 | 500 | 300 | | this | 100 | 200 | 150 | | that | 75 | 250 | 100 | | other | 25 | 50 | 50 | | Widget 3 | 555 | 222 | 999 | +----------+-----+-----+-----+
this，that和other的行是详细行，应以独特（较小）字体显示。我已经管理过那部分，但是让这些线条缩进显示（如图所示）是难以捉摸的。
报告已使用CSS元素td.item-heading和td.item-data来格式化现有的行标题和数据。我尝试添加新的td.detail-heading和td.detail-data，这有助于减少字体大小，但padding属性似乎没有任何效果。负责的CSS行是：
td.item-heading {font: 12pt "Arial"; text-align: left}
td.detail-heading {font: 10pt "Arial"; text-align: left; padding 20px}
与项目行相比，为什么这不会在细节线上给我20px的缩进？