代码之家 › 专栏 › 技术社区 › GregH

内联CSS中的单元格填充

css

GregH · 技术社区 · 14 年前

我有一个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>

3 回复 | 直到 14 年前

protobuf 14 年前

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

dreadwail 14 年前

只需从“ddTopMenu”开始选择dom元素:

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

Daniel Trebbien 14 年前

你真的是指填充,就像TDs本身的边距,还是同一行中单元格之间的30像素间隔?

如果需要填充,请设置 padding-right

如果你想在同一行的单元格之间间隔30像素,那么你应该看看 border-collapse . 将所有TDs的左右边框宽度设置为30px,边框颜色设置为 #ddTopMenu ,和到 collapse

<!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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前