代码之家 › 专栏 › 技术社区 › Leff

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

css3 css html

Leff · 技术社区 · 6 年前

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

我不知道如何才能达到预期的布局?

2 回复 | 直到 6 年前

Yandy_Viera 6 年前

您可以使用flex和meta element::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>

-3

Raphael Aleixo 6 年前

可以通过设置 width 第一次 100% .它将使用所有可用空间。您可以使用一些 min-width

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前