Question

我在div中有一个表（见下文）。如何为该div中表格中的每个单元格/列添加一个30px的正确填充？我的理解是我必须使用内联CSS？基本上，我希望每个单元格在右边填充30个像素。

<div id="ddTopMenu";>
<table border="0" >
  <tr>
   <td width=100></td><td >Dictionary</td><td>Search</td><td>Sources</td><td>References</td>
  </tr>
</table>
</div>

Answer 1

div#ddTopMenu table td {
  padding-right: 30px;
}

Answer 2

您只需从'ddTopMenu'开始选择dom元素：

#ddTopMenu table td {
     padding: 0px 30px 0px 0px;
}

Answer 3

你真的是指填充，这就像TD本身的边距，或同一行中的单元之间的30px分离？

如果你想要填充，那么将padding-right设置为30px，可能除了最后一列中的TD之外。

如果您希望同一行中的单元格之间有30px的间隔，那么您应该查看border-collapse。将所有TD的左右边框宽度设置为30px，将边框颜色设置为#ddTopMenu的背景颜色，将border-collapse设置为collapse。您还可以将最右侧和最左侧单元格的左右边框宽度分别设置为0，以便仅在单元格之间进行30px分隔：

<!DOCTYPE html>
<html>
<head>
<style>
#ddTopMenu {
    display: inline-block;
    border: black 1px solid;
    background-color: red;
}

#ddTopMenu td {
    background-color: white;
    border-left: red 30px solid;
    border-right: red 30px solid;
    border-collapse: collapse;
}

#ddTopMenu td.first {
    border-left-width: 0;
}

#ddTopMenu td.last {
    border-right-width: 0;
}
</style>
</head>
<body>

<div id="ddTopMenu">
<table border="0" cellspacing="0">
  <tr>
   <td width="100" class="first"></td><td >Dictionary</td><td>Search</td><td>Sources</td><td class="last">References</td>
  </tr>
</table>
</div>

</body>
</html>

内联CSS中的单元格填充

3 个答案: