Question

事实证明我不懂CSS。

使用Eric Meyer的CSS重置（http://meyerweb.com/eric/tools/css/reset/）

后，我碰到了一堵砖墙

我有一个有这种风格的桌子

table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}

但填充不适用于桌面，我无法弄清楚原因。我很高兴我在所有浏览器上看到相同的行为，包括IE7和IE8，但我没有看到任何填充。有人可以告诉我这里我做错了吗？

感谢。

修改

这是我的表

<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
            <td class="rpt_stroke" style="width: 280px">&nbsp;</td>
        </tr>
    </tbody>
</table>

Answer 1

问题不在于重置，而是W3 CSS属性规范指出padding可以应用于：

除table-row-group之外的所有元素，表头的基团，桌脚组，桌排， table-column-group和table-column

因此将padding应用于<table>无效。相反，我想到的唯一解决方案是应用margin，将表包装在<div>中，或将填充应用于具有特殊类的单个<td>。

Answer 2

看看他的CSS中的最后一行：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

尝试删除它并查看发生的情况，表格单元格通常不像block级别元素。我认为这里真正的问题是你不应该像这样设置表格元素，因为默认情况下它的显示属性是table，它与盒子模型不同。

尝试在单元格上添加填充或在表格中添加边距。

Answer 3

对我来说很好。你申报了DocType吗？

Answer 4

你必须将风格应用于TD而不是表格。

    table.home_right_top td

使用css reset后应用填充

4 个答案: