表行的高度不会保持固定

Question

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

以下是片段：

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

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

如果我的函数添加5行，则行之间会有很多空白。它们从页面顶部扩散到底部。我已经尝试将行的样式设置为20像素并保持固定，但它不起作用。我希望每行都有一个固定的高度。

Answer 1

1。您可以使用div标签而不是表格。您可以获得有关div here

的更多信息

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";

Answer 2

试试这个：

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'