表格行的高度不会保持固定答案

【问题标题】：Height of table rows won't stay fixed表格行的高度不会保持固定
【发布时间】：2013-03-12 07:25:42
【问题描述】：

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

这里是sn-p：

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 保持固定，但它不起作用。我希望每一行都有一个固定的高度。

【问题讨论】：

添加一个overflow: hidden 应该让它们保持固定
原来 CSS 文件对于表格元素有一个固定的高度。这就是问题所在。感谢您的提示！

标签： javascript html

【解决方案1】：

1. 您可以使用 div 标签而不是 table。你会得到更多关于 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";

【讨论】：

【解决方案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'

【讨论】：