Question

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

尝试使用CSS表格布局：修复但遇到问题。除非我将每个单元格中的填充设置为0px，否则对于该行中的每个单元格，表格的最终宽度将增加2px。

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

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

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

Answer 1

你正在制作边框，桌面上的填充等于0。

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

Answer 2

通过样式为tds添加填充或边距将增加其宽度，正如您所经历的那样。但是您可以为表格单元格中的内部添加边距。

示例：

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

td > * {
  margin: 3px;
}

Answer 3

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

Answer 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 */
}

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

4 个答案: