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和meta元素:: after来实现最后一个col的效果，例如：

.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

您可以通过将第一个td的width设置为100%来实现。它将使用所有可用空间。您可以使用一些min-width

来保证其他tds的最小宽度

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

2 个答案: