css - 如何从 CSS 设置表格单元格填充？

Question

我正在努力解决给定 HTML 表（由 Drupal 生成）中的单元格填充问题。

表格如下：

我尝试了以下方法：

.view-thumbnails-of-tips-and-tricks {
    padding: 10px 10px 10px 10px;  
}

我想在单元格内容周围添加填充，如下所示：

不幸的是，填充围绕表格，而不是单元格的内容。我该如何解决这个问题？

Answer 1

.view-thumbnails-of-tips-and-tricks tr td {
    padding: 10px;  
}

Answer 2

td在你的课后指定：

.view-thumbnails-of-tips-and-tricks td {
    padding: 10px;  
}

此外，确保cellpadding在 HTML 中设置为零，以防用户代理样式表提供自己的值。此值可能会覆盖或添加到 CSS 值。

<table cellpadding="0">

Answer 3

您应该将 css 设置为该单元格，而不是支架。

因此，您可以为该单元设置类名并自定义 css。

例如：.view-thumbnails-of-tips-and-tricks td { padding: 10px; }

希望这有帮助

Answer 4

尝试像这样定义你的风格：

.view-thumbnails-of-tips-and-tricks td {
    padding: 10px 10px 10px 10px;
}

这意味着您正在为以下内容定义样式：

1. 顶部 div（标识符“.view-thumbnails-of-tips-and-tricks”）
2. 该 div 内的表（“td”）