表格布局自动宽度

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 />

希望这会有所帮助

Answer 2

See Working Demo HTML

<center>
  <table id="customer_info">
    <tr>
      <td width="30%">
        <img id="logo" src="img/logo.png" align="middle" />
      </td>
      <td width="15%">&nbsp;</td>
      <td style="text-align:right" width="30%">
        User ID
      </td>
      <td width="30%">
        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 />

CSS

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