CSS表格填充问题答案

【问题标题】：CSS table padding issueCSS表格填充问题
【发布时间】：2014-01-25 16:21:56
【问题描述】：

我需要一些 CSS 样式方面的帮助。

我创建了一个有 2 行 2 列的表，但第一行中的第一列的行跨度为 2。这将创建一个像这样的表：http://i.imgur.com/UjdSwu5.png，这很好。

我的问题是，当我尝试对“名称”和“id”单元格（但不是图像单元格）应用填充时，只有名称单元格被填充。这是没有填充的屏幕截图：http://i.imgur.com/0CGVhDL.png，这是我尝试填充两个单元格时的屏幕截图：http://i.imgur.com/ipvHv2M.png

HTML：

<div id="body">
  <div>
    <div>
      <div>
        <div id="content">
          <div id="items">
            <ul class="list">
              <li>
                <table border="0">
                  <tr>
                    <td rowspan="2"><a href="index.html"><img
                      src="images/Stone.png" alt="Image" height="50" width="50"></a>
                    </td>
                    <td>
                      <h3 class="name">Stone</h3>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p class="id">1</p>
                    </td>
                  </tr>
                </table>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

#content td h3 {
  padding:5px 1px 5px 30px;
}

#content td p {
  padding:5px 1px 5px 30px;
}

如果我执行以下操作，那么 id 单元格会按照我想要的方式填充，但它也会填充 img 单元格。

#content td {
  padding:5px 1px 5px 30px;
}

我做错了什么？

【问题讨论】：

标签： html css padding

【解决方案1】：

您只是将填充应用于错误的元素。

您正在为#content td 内的h3 和p 元素应用填充，但您真正想要做的是将填充应用到td 的单元格。

为了正确地做到这一点，你需要像这样识别你的细胞：

<td class="name">
  <h3>Stone</h3>
</td>

和

<td class="id">
    <p>1</p>
</td>

CSS 应该是这样的

#content td.name {
  padding:5px 1px 5px 30px;
}

#content td.id {
  padding:5px 1px 5px 30px;
}

另外，一个好的做法是不要将 class 命名为 id，这样之后可能会非常混乱。

例如，我建议将其称为 item-id。

<td class="item-id">
    <p>1</p>
</td>

#content td.item-id {
  padding:5px 1px 5px 30px;
}

【讨论】：

稍微扩展一下：如果您有多个元素的样式必须相同，并且您有 class="name" 和 class="id" 例如，您可以使用逗号分隔符选择多个元素： #content td.id, #content td.name.

【解决方案2】：

首先，我建议使用元素的类名来设置它们的样式。

这是应该做你想做的 css：

.name, .id{
    padding: 80px;
}

在这个小提琴中，你可以看到一个可行的解决方案：http://jsfiddle.net/63eUh/

正如 Kevin Smouts 已经说过的，您将填充应用于错误的元素 - 当您以这种方式处理元素时很容易发生这种情况 - 很难阅读。

每当您更改 HTML 结构时，您都必须关心 css 并更新它。所以我真的不建议将你所有的 html-tree 放在 css 中以访问正确的元素。

【讨论】：