时间戳

首页 > 解决方案 > 如何对齐列本身，而不是其中的内容在表格中左对齐

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%;
    }
  }
}

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

标签： htmlcss

解决方案

您可以使用 flex 和最后一个 col 的元元素 ::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>

推荐阅读