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;
}

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

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

Answer 2

您应该在border-left: 1px solid #ddd上使用td而不是此1px列。您不应该使用表格的列来进行布局。

td宽度比它应该大

2 个答案: