html - td 宽度比应有的大

Question

http://jsfiddle.net/kpz8hxuy/

<table style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;">
<h2>Loremipsum</h2>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos.</p>
<p>&nbsp;</p>
<p><a href="#">Loremipsum</a></p>
</td>
<td style="width: 20px;">&nbsp;</td>
<td style="width: 1px; background: #ddd;">&nbsp;</td>
<td style="width: 20px;">&nbsp;</td>
<td style="text-align: center;">
<h3>Loremipsum</h3>
<p>&nbsp;</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos.</p>
<p>&nbsp;</p>
<p><a href="#">Loremipsum</a></p>
</td>
</tr>
</tbody>
</table>

我将 td 宽度设置为 1px 但它不是 1px，而是 6px。

无法真正弄清楚为什么它会这样。

最好的问候

Answer 1

默认情况下，表格布局是自动的。即使您已经定义了表格的宽度 td ，它也会根据其内容进行扩展。因此，对表格使用固定布局不会自动扩展内容，而是将其设置在定义的宽度内。

table{
  table-layout: fixed;
}

---

当您尝试使用仅 1 像素的 td 宽度时，我想您正在尝试使用边框，因此，请使用边框而不是定义 td 宽度。

table td{
   border-left: 1px solid #000;
}