HTML Table - Minimizes the width of some columns while maintaining the width of others. Mixed with bells
I have a fairly simple table showing prices. Looks like this
Now I want to do something that is not easy. I want it to look better by making all numbers right-justified while keeping the alignment od
and Kč
. In other words, in this case, I want the last number to 60
shift to the right to align it with the longer numbers above.
The only way that came to my mind - to split each column into three columns, each containing the word " od
, the number itself
and Kč
" and make the alignment of the right center. Also I need to minimize the width of the first two in the triad.
In other words, I want to split the column into 3, having a total width of 25% of the table, and the first two columns should be as small as possible and the last column c Kč
should take that much width.
This way I can align the number to the right, giving the illusion of all text being aligned to the left.
Here's a more simplified code for what I was trying to do:
<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>
and CSS styles
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; }
I tried to do exactly that to see how it would turn out. This did not affect the width of the columns. The pillars are still evenly spaced. I don't understand what happened with this code. Any ideas?
Also, if you have an idea on how to align the numbers correctly, feel free to share them. I realize this is quite a bit of a hack, but I don't know any better. Thank.
source to share
My suggestion was to fill in the blanks to align the numbers. You can use curly spaces to make sure they are as wide as the numbers (if the font supports it). Also set the OpenType Table Shapes feature to CSS , just make sure that (again, only works if the font supports it).
table {
font-feature-settings: "tnum";
}
<table>
<tr>
<th>Ceník</th>
<th>Krátké vlasy</th>
</tr>
<tr>
<td>Střih</td>
<td>od    1 Kč</td>
</tr>
<tr>
<td>Střih</td>
<td>od   60 Kč</td>
</tr>
<tr>
<td>Střih</td>
<td>od  160 Kč</td>
</tr>
<tr>
<td>Střih</td>
<td>od 1160 Kč</td>
</tr>
</table>
source to share
I think this is a great place for pseudo-elements.
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>
source to share