HTML table - minimize width of some columns while retaining width of others. Mixed with colspans

Question

I have pretty simple table showing prices. It looks like this

Now I want to do something which isn't that simple. I want to make it look better by making all the numbers align to the right while retaining alignment of od and Kč. In other words, in this case I want the last number 60 to shift to the right to align with the longer numbers above.

The only way that came to my mind is to split each column into 3 columns containing each "word" od, the number itself and Kč and make the middle one align to the right. 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 the total width of 25% of the table and the first two columns should be as small as possible and the last column with Kč should take as much of the width as possible.

This way I can align the number to the right while making the illusion of the whole text being aligned to the left.

Here's the over-simplified code of what I tried 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 the 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 just this to see how it will work out. It didn't affect the width of the columns at all. The columns are still evenly spaced. I don't understand what's wrong with this code. Any ideas?

Also if you have better idea how to align the numbers in the first place, feel free to share it. I understand that this is pretty much hack but I don't know any better. Thanks.

Answer 1

I think this is an excellent 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>

Answer 2

My suggestion would be to fill in spaces to align the numbers. You can use figure spaces to make sure they are as wides as the digits (if the font supports it). Also set the OpenType feature of tabular figures in CSS, just be sure (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 &#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>