如何使用 CSS 编辑表格布局，以便填充不会增加表格宽度？答案

【问题标题】：How do I use CSS to edit the table layout so I can padding does not increase table width?如何使用 CSS 编辑表格布局，以便填充不会增加表格宽度？
【发布时间】：2014-06-26 13:10:17
【问题描述】：

我正在专门为 IE（企业环境）编写页面。试图从一个叠放在另一个桌子上的单独的表格中实现匹配的布局。

尝试使用 CSS 表格布局：已修复，但遇到问题。除非我将每个单元格中的内边距设置为 0px，否则表格的结果宽度对于行中的每个单元格都会增加 2px。

我需要单元格边缘和文本之间有距离，但我不希望这影响表格的宽度。如何获得填充和精确的固定宽度表格？

这是我的代码。请注意，DIV 显示的宽度正好为 500 像素，但表格更宽。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:30px;width:500px;background-color:Blue;">500px</div>
<table style="width:500px;table-layout:fixed;border-spacing:0px;"><tr>
    <td style="width:100px;background-color:#d0d0d0;">Text</td>
    <td style="width:100px;background-color:#d0d0d0;">Text</td>
    <td style="width:100px;background-color:#d0d0d0;">Text</td>
    <td style="width:100px;background-color:#d0d0d0;">Text</td>
    <td style="width:100px;background-color:#d0d0d0;">Text</td>
</tr></table>
</body>
</html>

【问题讨论】：

标签： css html-table padding

【解决方案1】：

您正在制作边框，并且表格上的填充在任何地方都等于 0。

table, th, td {
  border: 0px;
  padding: 0px;
}

【讨论】：

纯代码答案不太有用。此外，您缺少分号。解释为什么这个答案可以解决问题？

【解决方案2】：

如您所见，通过样式为您的tds 添加内边距或边距会增加它们的宽度。但是您可以为表格单元格内的任何内容添加边距。

例子：

<td><span>Text</span></td>

td > * {
  margin: 3px;
}

【讨论】：

谢谢凯蒂。我不确定这是否会有所帮助，因为 a) 我必须通过大量代码向所有内容添加跨度，并且 b) 边距似乎只影响单元格的侧面，没有垂直空间。

【解决方案3】：

似乎 CSS 模型通过增加对象的宽度来实现填充，而不是通过在对象内创建内部边距。我可以克服这个问题的唯一方法是将示例中每列的宽度更改为 96px，从而适应文本两侧固有的 2px 填充。

【讨论】：

【解决方案4】：

您必须重置 td 元素的填充。您的表格上不需要table-layout: fixed;，应考虑避免元素上的内联样式属性。

填充是由于浏览器的默认样式表。如果您想删除所有默认样式，可以查看“css resets”。

查看以下代码和live example on JSFiddle。

HTML

<div class="reference">500px</div>
<table>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

CSS

.reference {
    width: 500px;
    background-color: blue;
}

table {
    width: 500px;
    border-spacing: 0;
}

td {
    width: 100px;
    background-color: #d0d0d0;
    padding: 0; /* important */
}

【讨论】：