表列對齊CSS

Question

我編輯電子書格式的電子書。我使用CSS來完成書籍佈局。我遇到了一個表列對齊問題，並且我不知道如何處理它。該表格包含每列的文本標題，然後是單元格的數字內容。列寬由標題設置，這使得在某些情況下列與單元格內容相比非常寬。

我想將列中的數字與其最後一位數字對齊。但我希望他們更多地放在專欄的中心。 「text-align：right」命令對齊單元格右側的數字。有沒有辦法將所有數字轉移到中心位置，同時保持它們與最後一位數字完全對齊？

Answer 1

這裏是一對夫婦的方式，可能會爲你

table { 
 
    width: 400px; 
 
    border: 1px solid gray; 
 
} 
 
td { 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
    width: 33%; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 40%; 
 
    background: #eee; 
 
    text-align: right; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     nr 1 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 123 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     nr 123 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     nr 1 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>

樣品2

table { 
 
    width: 400px; 
 
    border: 1px solid gray; 
 
} 
 
td { 
 
    text-align: center; 
 
    border: 1px solid gray; 
 
    width: 33%; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 50%; 
 
    background: #eee; 
 
    text-align: right; 
 
} 
 
span span { 
 
    float: left; 
 
    text-align: left; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      id 
 
     </span> 
 
     1 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      cnt 
 
     </span> 
 
     12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      code 
 
     </span> 
 
     123 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      code 
 
     </span> 
 
     123 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      cnt 
 
     </span> 
 
     12 
 
     </span> 
 
    </td> 
 
    <td> 
 
     <span> 
 
     <span> 
 
      id 
 
     </span> 
 
     1 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>