我有一个位于父 div 中的表格，其中包含正文和其他内容。我有以下似乎不起作用的 CSS：
table {width:100%; padding: 0 50px 0 50px;}
当我使用边距而不是填充时，它可以工作 - 但是，对于宽度：100%，使用边距会将整个内容从父 div 中移除。我想我可以减小宽度或指定精确的像素数量，但网站的其余部分会随着屏幕大小而缩放，我也希望它能够像这样工作。
【问题讨论】：
标签： html css margin padding css-tables
这就是原因；
从MDN开始，要在表格中使用填充，您需要有border-collapse: separate;，以便允许使用border-spacing，因为border-spacing是计算外部表格边缘和表格之间距离的一个因素外部单元格的边缘（参见下面MDN 的引用）。之后，您现在可以为 padding 分配一个值。您还可以设置border-spacing: 0px; 以取消将border-spacing 添加到填充。
border-spacing CSS 属性设置相邻单元格边框之间的距离。该属性仅在border-collapse 为独立时适用。
border-spacing 值也用于表格的外边缘，其中表格的边框与第一/最后一列或行中的单元格之间的距离是相关（水平或垂直）边框的总和-间距和表格上的相关（顶部、右侧、底部或左侧）填充。
【讨论】：
前面的答案表明css可以单独为ea方向设置border-[direction]。但是复制旧式table cellpadding="7" border="1" 的更简单的纯 css 解决方案如下。在 CSS 中：
table {
border-collapse:collapse;
width: 100%;
}
td {
padding: 7px;
border:1px solid;
}
显示在这个小提琴中：http://jsfiddle.net/b5NW5/77
【讨论】：
有一些与表格相关的特殊属性。你要找的是border-spacing。
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 50px;
}
示例：http://jsfiddle.net/feeela/fPuQ6/
更新：在玩弄了自己的小提琴之后，我必须承认，我说“表格没有填充”是错误的。桌面上的填充工作正常——至少在 Chrome 和 Opera (12) 中查看时是这样。下面的 sn-p 也应该是你想要的：
table {
width: 100%;
padding: 0 50px 0 50px;
}
查看小提琴的更新版本：http://jsfiddle.net/feeela/fPuQ6/3/
尽管如此，我仍然想知道为什么没有像 display: block; 那样将填充添加到宽度中。
另见：
【讨论】：
您可以在表格定义中添加单元格填充，或者如果您想使用 CSS 然后使用可以试试这个：
如果使用 CSS：
<style type="text\css">
.table {
width: 100%;
border-top:1px solid red;
border-right:1px solid red;
border-collapse:collapse;
}
.table td {
padding: 7px;
border-bottom:1px solid red;
border-left:1px solid red;
}
</style>
<table class="table">
<tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
<tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
<tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>
如果使用内联：
<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
<tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
<tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
<tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>
您可以在此处查看此操作： http://jsfiddle.net/b5NW5/1/
希望对你有帮助
【讨论】：