javascript - 表格行的高度不会保持固定

Question

我正在通过 javascript 动态地将行和单元格创建到 HTML 表中。

这是片段：

var rowCount = table.rows.length;
var row1 = table.insertRow(rowCount);

var cell1_1 = row1.insertCell(0);
cell1_1.innerHTML = "From";

如果我的函数添加了 5 行，那么行之间会有很多空白。它们从页面顶部到底部分布。我尝试将行的 style.height 设置为 20 px zo 保持固定，但它不起作用。我想要每行的固定高度。

Answer 1

尝试这个：

CSS

.testTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}
.testTable > tbody > tr {
    height:20px !important;
    vertical-align:middle !important;
}
.testTable > tbody > tr > td {
    height:20px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

JavaScript

// Assign a class to the table
var table = document.getElementById(tableID);
table.className = 'testTable'

Answer 2

1.您可以使用 div 标签而不是 table。您可以在此处获得有关 div 的更多信息

2.您可以使用以下方法在“cell1_1”上应用样式：

    cell1_1.style.height="20px";

但是每个浏览器都有根据规则计算样式和样式。因此，要“重载”这些规则，只需使用以下内容：

    cell1_1.style.display="inline-block";

我希望它有帮助！

编辑 结果：

    var rowCount = table.rows.length;
    var row1 = table.insertRow(rowCount);

    var cell1_1 = row1.insertCell(0);
    cell1_1.innerHTML = "From";
    cell1_1.style.height="20px";
    cell1_1.style.display="inline-block";