如何使表格的动态行达到标准高度？

Question

我有一个表，其中表行是动态填充的。当表中显示行时，每行占据表的整个高度，除以行数。我想要所有等高的行，因此要实现这一点，我在display: block;

中添加了<table>

默认情况下，我的表从以下开始，但随后通过一些jQuery，我删除了第一行remove_table_row1，并用实际数据填充了它。

HTML

<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" id="checkbox1"></th>
            <th></th>
        </tr>
    </thead>
    <tbody id="table1_container">
        <tr class="remove_table_row1">
            <td></td>
        </tr>
    </tbody>
</table>

CSS

.table {
    background: white;
    display: block;
    min-height: 500px;
    max-height: 500px;
    overflow-y: scroll;
}

问题是当我向表中添加display: block;时，它会导致表行宽度像这样缩短，但是高度很好。

如果我从表中删除display: block;，则行再次变为全角，但行的高度填满了表的整个高度。我添加的行越多，得到的行越短。

如何使行达到全行和标准行的高度？

Answer 1

使用显示：用内联块而不是块可以控制宽度。

Answer 2

我不知道您做了什么来动态添加行

，但是您可以在添加行之前对行进行计数，然后更改整个表的高度 通过每次添加一行

table.height = (rowsCount + 1) * heightOfEachRow

注意：分享您的“动态添加行”代码以帮助您编写代码！

注意：您不需要使用display：block或... else。

Answer 3

我也想做到这一点。我当时在想在php部分中添加样式部分。

if a = b then row-height = sum(total row * 50px) {
  tr{height: ".$rowHeight."};
  }

然后调用页面上的样式表，该样式表会覆盖所有附加的CSS表单吗？

在我的情况下，我需要知道某天有多少位教练，因此我将进行MYSQL搜索并从中获取图形需求，然后将其存储在变量中。

我在其他形式上也做过类似的事情，到目前为止，它一直坚定不移。我知道会有比我更好的方法，但这就是我要这样做的方式。

我知道我并没有写代码只是为了解释如何实现这一目标。