title: How to align the columns themselves, not the content in them to left in a table
body: <p>I am making a table, where I don't know the number of columns beforehand. Since the first column is wider than the others, I know the width for it. I would like to make the other columns smaller, with same width for each column. How can I make a table layout, where if I have 3 columns for example, first one the wider, and the others smaller, how can I align these columns, so that they take up the space in the table to the left, and leave the left space on the right. </p>
  
  <p>So, the layout would look something like this:</p>
  
  <pre><code>column1           |  column2 | column3
  ----------------------------------------------------------------- 
  value1            |        2 |       3  
  -----------------------------------------------------------------
  </code></pre>
  
  <p>Also, I am not sure how to achieve this, since I am also aligning the content of all the columns but the first one to the right. And I need the last column to take the whole space of the table, because I should show the bottom border all the way to the end of the table layout. </p>
  
  <p>I only have very little css for this table so far:</p>
  
  <pre><code>.table {
    tr {
      td:last-child {
        border-left: dashed 2px gray;
      }
      td {
        text-align: right;
      }
  
      td:first-child {
        text-align: left;
        width: 40%;
      }
    }
  }
  </code></pre>
  
  <p>I am not sure how can I achieve the desired layout?</p>