Как выровнять сами столбцы, а не содержимое в них слева в таблице

Question

Я делаю таблицу, в которой заранее не знаю количество столбцов.Поскольку первый столбец шире остальных, я знаю его ширину.Я хотел бы сделать другие столбцы меньше, с одинаковой шириной для каждого столбца.Как я могу сделать макет таблицы, где, если у меня есть, например, 3 столбца, сначала один шире, а остальные меньше, как я могу выровнять эти столбцы, чтобы они занимали место в таблице слева и оставлялилевое пространство справа.

Итак, макет будет выглядеть примерно так:

column1           |  column2 | column3
----------------------------------------------------------------- 
value1            |        2 |       3  
-----------------------------------------------------------------

Кроме того, я не уверен, как этого добиться, так как я также выравниваю содержимое всех столбцов, кроме первогоодин справа.И мне нужно, чтобы последний столбец занимал все пространство таблицы, потому что я должен показывать нижнюю границу вплоть до конца макета таблицы.

У меня пока очень мало CSS для этой таблицы:

.table {
  tr {
    td:last-child {
      border-left: dashed 2px gray;
    }
    td {
      text-align: right;
    }

    td:first-child {
      text-align: left;
      width: 40%;
    }
  }
}

Я не уверен, как мне достичь желаемой раскладки?

Answer 1

Вы можете добиться этого, используя flex и метаэлемент :: after для последнего столбца, например:

.mytable {
  width: 100%;  
}

tr {
    display: flex;    
}

tr:after {  
  content: '';
  flex-grow: 1;  
  border-left: 1px solid #000;
  border-bottom: 1px dashed #000;
}
  
td {
  width: 100px;
  border-left: 1px solid #000;
  border-bottom: 1px dashed #000;
  text-align: right;    
}

td:first-child {  
  width: 200px;
  border-left: 0;      
  text-align: left;
}

<table class="mytable">
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>    
    <td>value1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>


<h3>A table with more columns also works:</h3>

<table class="mytable">
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
    <td>column4</td>
    <td>column5</td>
  </tr>
  <tr>    
    <td>value1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Answer 2

Этого можно добиться, установив width первого тд на 100%.Он будет использовать все доступное пространство.Вы можете гарантировать минимальную ширину для других тдс, используя некоторые min-width