HTML表格 - 儘量減少某些列的寬度，同時保留其他列的寬度。與集體混合

我有非常簡單的表格顯示價格。它看起來像這樣HTML表格 - 儘量減少某些列的寬度，同時保留其他列的寬度。與集體混合

enter image description here

現在我想要做的事是沒有那麼簡單。我想通過將所有數字對齊到右側，同時保持對齊od和Kč，使它看起來更好。換句話說，在這種情況下，我希望最後一個數字60向右移動以與上面的較長數字對齊。

是來到我心中唯一的辦法就是每列分成包含每個「單詞」 od，the number itself和Kč 3列，使中間的一個右對齊。此外，我需要儘量減少黑社會中頭兩個的寬度。

換句話說，我想將列拆分爲3，總寬度爲表的25％，前兩列應儘可能小，最後一列與Kč應該儘可能多的寬度儘可能。

這樣我就可以將數字向右對齊，同時使整個文本的錯覺與左邊對齊。

這裏是什麼，我試圖做的過於簡單化代碼：

<table> 
    <tr> 
     <th>Ceník</th> 
     <th colspan="3">Krátké vlasy</th> 
     <th colspan="3">Podlouhlé vlasy</th> 
     <th colspan="3">Dlouhé vlasy</th> 
    </tr> 

    <tr> 
     <td>Střih</td> 

     <td>od</td> 
     <td>130</td> 
     <td>Kč</td> 

     <td>od</td> 
     <td>280</td> 
     <td>Kč</td> 

     <td>od</td> 
     <td>250</td> 
     <td>Kč</td> 
    </tr> 

    <!-- OTHER ROWS HERE --> 
</table>

和CSS樣式

th, td { width: 25% } 
tr td:nth-child(2), 
tr td:nth-child(3), 
tr td:nth-child(5), 
tr td:nth-child(6), 
tr td:nth-child(8), 
tr td:nth-child(9) { width: 1px; }

我試圖做的只是這個，看看它是如何工作的。它根本不影響列的寬度。列仍然均勻分佈。我不明白這段代碼有什麼問題。有任何想法嗎？

此外，如果您有更好的主意如何對齊數字，請隨時分享。我知道這是非常黑客，但我不知道更好。謝謝。

來源

2015-07-20 Michal Artazov

的列仍然均勻地隔開。你在說'th'還是'td'？ –

兩者。由於'th'具有'colspan =「3」'，它們都具有25％的寬度。另一方面，'td'按照這個距離均勻分佈。黑社會有25％的總寬度，但均勻間隔，而我想每個黑社會的前2列有最小的寬度，最後一個佔據大部分的空間。 –

我不明白要求，我已經嘗試解決這個[DEMO]（http://jsfiddle.net/9poessty/1/）中的問題。 – psycotik

我的建議是填寫空格來對齊數字。您可以使用figure spaces以確保它們與數字一樣寬（如果字體支持它）。同時設置OpenType feature of tabular figures in CSS，只要確定（再次，只有在字體支持它時纔有效）。

table { 
 
    font-feature-settings: "tnum"; 
 
}

<table> 
 
    <tr> 
 
    <th>Ceník</th> 
 
    <th>Krátké vlasy</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Střih</td> 
 

 
    <td>od &#8199;&#8199;&#8199;1 Kč</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Střih</td> 
 

 
    <td>od &#8199;&#8199;60 Kč</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Střih</td> 
 

 
    <td>od &#8199;160 Kč</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Střih</td> 
 

 
    <td>od 1160 Kč</td> 
 
    </tr> 
 
</table>

來源

2015-07-20 08:41:44 RoToRa

我認爲這是僞元素的好地方。

table { 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
thead { 
 
    background: rebeccapurple; 
 
    color: white 
 
} 
 
td { 
 
    padding: .5em; 
 
    text-align: right; 
 
    position: relative; 
 
    border: 1px solid grey; 
 
} 
 
tr td:first-child { 
 
    text-align: left; 
 
} 
 
thead td:not(:first-child) { 
 
    padding-right: 2.5em; 
 
} 
 
tbody td:not(:first-child):after { 
 
    content: ' $'; 
 
} 
 
tbody td:not(:first-child):before { 
 
    content: 'From'; 
 
    position: absolute; 
 
    left: 0; 
 
    margin-left: 1em; 
 
}

<table> 
 

 
    <thead> 
 
    <tr> 
 
     <td>Item</td> 
 
     <td>Price</td> 
 
     <td>Discounted Price</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Socks (pack of 50 pair)</td> 
 
     <td>200</td> 
 
     <td>150</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ties (each)</td> 
 
     <td>25</td> 
 
     <td>20</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2015-07-20 11:19:42

HTML表格 - 儘量減少某些列的寬度，同時保留其他列的寬度。與集體混合

回答

相關問題