html - 表格布局自动宽度

Question

我想将“用户 ID”标签右侧对齐，使其更接近它的值，请参见图片。以下。似乎无法通过额外的 colspan 解决此问题。用户 ID 可以包含 1-9 位数字。

      <center>
      <table id="customer_info">
        <tr>
          <td><img id="logo" src="img/logo.png" align="middle"></img></td>
          <td colspan="2">User ID</td>
          <td>011238</td>
        </tr>
         <tr>
          <td colspan="3">Items to get:</td>
          <td>390 s.</td>
        </tr>
        <tr>
          <td colspan="3">Complete until:</td>
          <td>21.1.2013</td>
        </tr>
      </table>
      </center>
      <hr />

table {
  white-space: nowrap;
  border: none;
  width: 250px;
  height: 50px;
  border-spacing: 0px;
  color: #806E66;
  font-family: "Arial";
  font-size: 14px;
  text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

#customer_info tr > td:last-child {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  color: #E36608;
}

#customer_info tr:nth-child(1) > td:nth-child(2) {
  text-align: right;
  font-size: 12px;
}

Answer 1

因为您将所有表格单元格连接在一起并且宽度相互依赖

解决这个问题的方法是执行以下操作:

<center>
      <table id="customer_info">
        <tr>
          <td colspan="3" align="right">
          <table width="100%"><tr><td><img id="logo" src="img/logo.png" align="middle"></img></td><td align="right">User ID</td><td align="right">011238</td></tr></table></td>
        </tr>
         <tr>
          <td colspan="2">Items to get:</td>
          <td width="100%" align="right">390 s.</td>
        </tr>
        <tr>
          <td colspan="2">Complete until:</td>
          <td align="right">21.1.2013</td>
        </tr>
      </table>
</center>
      <hr />

希望对你有帮助