Question

我在下面的小提琴中有两张桌子。行未与标题对齐。这是我的第一张表的代码

img data-src

另一张表遵循类似的模式。由于缺乏空间，我不会在这里添加它们。

https://jsfiddle.net/fk6fnto4/

无论我做什么，我的表行都没有正确对齐。我已经查看了许多解决方案并相应地修改了代码，但无济于事。请帮我辨别这里有什么问题。

Answer 1

要使列内容对齐，我们需要将其宽度设置为固定。目前，每个单元都占用了所需的空间。似乎第一列应该具有最小宽度，第三列应该是最宽的。其他列可以是相同的宽度，因为它们都包含5位数字。要设置不同的td宽度，我们可以为每个使用不同的类，但它可能会很混乱，因此我们将使用nth-child()选择器，如下所示：

td:nth-child(1) {
    width: 10%
}

这会将父母第一个孩子的所有td元素的宽度设置为10％。你应该做的是将它添加到你的风格中，看起来像这样：

<style>
  .container {
    margin-left: 0;
  }

  tbody {
    display: block;
    max-height: 500px;
    overflow-y: scroll;
  }

  thead,
  tbody tr {
    display: table;
    width: 100%;
  }

  thead {
    width: 100%;
  }

  table {
    width: 200px;
  }

  td:nth-child(1) {
    width:10%
  }

  td:nth-child(3) {
    width:30%
  }

</style>

这意味着第一列将占据tbody宽度的10％，第三列占据30％，其他列将占20％。但是，如果那些也可以包含可变长度的数据，您也应该为它们添加类似的规则。

这样，列内容将与中心对齐。要设置不同的对齐方式，请使用text-align属性。

表行未对齐

1 个答案: