html - 奇怪的 CSS 定位行为

Question

我完全无法理解为什么这个 div 中的表格向右对齐得如此糟糕。

<div id="proof_check" style="position:relative; width:577px;  padding:10px; padding-bottom:0px;padding-top:0px; border:3px solid #ccc;  background-color:#fff; z-index:0"> 
<table><tr><td></td><td style='vertical-align:top; padding-left:5px;'><span style='font-weight:bold; color: #295BA7;'>Proof Approval</span><br /></td></tr><tr><td><input type='checkbox' id='proof-approved'></td><td style='vertical-align:top;padding-left:5px;'>I approve of the above design, spelling and layout and understand that my document will print as it appears above and that after placing my order, it cannot be changed.</td></tr><tr valign=bottom><td colspan='2'></td>
</tr>
</table>
</div>

结果是这样的:

到底为什么要从 div 的中间开始而不是从左边开始呢？

Answer 1

您还没有为表格的“td”列提供任何 colspan 或宽度。因此它将表行“tr”分成两个相等的部分。

给出一个 colspan 元素，例如:

<TABLE STYLE="table-layout:fixed;">
  <COLSPAN>
   <COL width="5%"/>
   <COL width="95%">
  </COLSPAN>
  ....rest of the code goes here...
</TABLE>

每次第一列占 5%，第二列占 95% 宽度。

希望对你有帮助