桌面佈局自動寬度

我想將「用戶ID」標籤右對齊，使其更接近其值，請參閱圖片。下面。似乎不能用額外的colspan來解決這個問題。用戶ID可以包含1-9個數字。桌面佈局自動寬度

enter image description here

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

來源

2012-08-13 Vasya

，因爲你所有的表格單元連接在一起，並且依賴於彼此的寬度

來解決這一解決方案是做到以下幾點：

<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-13 09:20:03 Moe

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

來源

2012-08-13 09:21:25 gaurang171

桌面佈局自動寬度

回答

相關問題