Javascript 表行的高度为'；不要固执己见

我正在通过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设置为20px，并保持固定，但不起作用。我希望每行有一个固定的高度。

1。您可以使用div标记而不是table。您可以获得有关div的更多信息

2.您可以使用以下方法在“cell1\u 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";

试试这个：

CSS JavaScript

---

添加一个

overflow:hidden

，使它们保持固定编辑结果是CSS文件的table元素具有固定的高度。这就是问题所在。谢谢你的提示！

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

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