Html 如何在表中对齐列本身，而不是列中的内容

我在做一张表，事先我不知道列的数量。因为第一列比其他列宽，所以我知道它的宽度。我想使其他列更小，每列的宽度相同。如何制作表格布局，例如，如果我有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%;
    }
  }
}

---

我不确定如何实现所需的布局？

您可以通过将第一个td的

宽度设置为
100%
来实现这一点。它将使用所有可用空间。您可以使用一些
minwidth
来保证其他tds的最小宽度。您可以使用flex和meta元素：：after来实现这一点，最后一个col如下：

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


.mytable{
宽度：100%；
}
tr{
显示器：flex；
}
tr:在{
内容：''；
柔性生长：1；
左边框：1px实心#000；
边框底部：1px虚线#000；
}
运输署{
宽度：100px；
左边框：1px实心#000；
边框底部：1px虚线#000；
文本对齐：右对齐；
}
td：第一个孩子{
宽度：200px；
左边框：0；
文本对齐：左对齐；
}

专栏1
专栏2
第3栏
价值1
2.
3.
具有更多列的表也可以工作：
专栏1
专栏2
第3栏
专栏4
专栏5
价值1
2.
3.
4.
5.
这大部分是可能的，但中间列的宽度相等并不是使用表布局AFAIK。您为第一列和第二列指定宽度，第三列将填充剩余的空间。@NawedKhan列数未知。@NawedKhan，但是，第三列的内容将一直向右移动，这不是我想要的，我如何使内容看起来与第二列的宽度相同？您可以在CSST中使用
calc（）
函数这并不能解决中间列具有相同宽度的问题-但是，其他列将向右对齐，我在问题中写道，这不是我想要的。我不确定我是否理解。我以为这就是您试图实现的目标：不幸的是，这并不能解决文本对齐问题……这是CSS无法解决的。@Paulie_D我添加了一个包含更多列的示例，正如您所看到的，它可以均衡多个中间列。关于对齐方式，我看到我的表看起来像OP所期望的布局，第一列向右对齐，其余列向左对齐。实际上，你没有均衡中间列，只是没有均衡第一列。另外，再次检查文本对齐方式-“5”文本未对齐……这是CSS无法解决的。@Paulie_D我修改了我的代码片段，在最后一列中使用了meta:after，这解决了仅使用CSS对齐的问题。