0

「ユーザー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;
}
4

2 に答える 2

0

すべてのテーブルセルが一緒に接続されており、互いに幅に依存しているため

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

お役に立てれば

于 2012-08-13T09:20:03.937 に答える
0

実際のデモ 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;
}
于 2012-08-13T09:21:25.397 に答える