Question

我使用折叠的html表创建的this chart的最后一行虽然具有相同的宽度，却缩短了几个像素。为什么会这样？有没有更好的方法来创建图表而不使用多个表？

<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr>
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">User</td>
<td style="text-align:center;width:600px;height:25px;border-right:solid 1px;">300 Gb</td>
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">Usage (Gb)</td>
</tr>
</table>
<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr>
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user1</td>
<td style="background-color:#FF0000;width:436px;height:25px;"></td>
<td style="background-color:#D22A00;width:54px;height:25px;"></td>
<td style="background-color:#A85400;width:1px;height:25px;"></td>
<td style="background-color:#7F7F00;width:12px;height:25px;"></td>
<td style="width:97px;border-right:solid 1px;"></td>
<td style="width:100px;text-align:center;">252.69</td>
</tr>
</table>
<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr>
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user2</td>
<td style="background-color:#FF0000;width:344px;height:25px;"></td>
<td style="width:256px;border-right:solid 1px;"></td>
<td style="width:100px;text-align:center;">172.15</td>
</tr>
</table>

<table cellpadding="0" style="padding-right:0px;padding-left:0px;text-align:center;width:800px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr>
<td style="height:25px;width:114px;background-color:#FF0000">&gt;32 days</td>
<td style="height:25px;width:114px;background-color:#D22A00">&lt;32 days</td>
<td style="height:25px;width:114px;background-color:#A85400">&lt;16 days</td>
<td style="height:25px;width:114px;background-color:#7F7F00">&lt;8 days</td>
<td style="height:25px;width:114px;background-color:#54A800">&lt;4 days</td>
<td style="height:25px;width:114px;background-color:#2AD200">&lt;2 days</td>
<td style="height:25px;width:116px;background-color:#00FF00">&lt;1 days</td>
</tr>
</table>

Answer 1

对于容器元素，默认情况下，它们的宽度/高度不包括填充，边距和边框（感谢@davidpauljunior）。设置元素的box-sizing: border-box属性，以确保它们与指定的宽度/高度完全对齐，同时考虑填充，边距和边框。

http://jsfiddle.net/hCj9J/1/

Answer 2

看起来你的数学错误或额外的边界与你的数字紧密相关。你真的没有在这里有效地使用表或CSS类。使用表而不是一堆div的关键是你不必指定每个单元格大小应该是什么。它继承的display：table属性为你做了很多花哨的东西。

在前两行中创建一个包含3个TD的新表，在第3行中创建7个。第三行将包含所有7个TD。对于第一行和第二行，您将拥有一个TD，那么您将拥有一个带有colspan =＆＃39; 5＆＃39;接着是另一个TD。

以下是colspans的基本示例：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
</table>

然后，你可以给这些单元格或者一些可以用来用CSS给它们着色的类，而不是给每个单元赋予它自己的样式属性。

HTML表格宽度差异

2 个答案: