表格的行高根据我使用的浏览器的不同而有所不同

Question

这段小代码动态创建了一个表，但在不同的浏览器中它的工作方式并不相同。理想情况下，我需要动态设置行高（这本身就是一个我无法解决的问题），但是在尝试弄清楚如何做到这一点时，我发现我的表格以不同的方式显示，具体取决于我使用的浏览器使用。它适用于 Firefox 和 IE，但不适用于 Chrome。在 Chrome 中，第一行几乎占据了表格的全部高度，为其他行留下了很少的空间。顺便说一下，这段代码只创建了 3 行，但稍后它将擦除其原始内容并创建 5 行具有不同内容的行（擦除和重新创建部分未在此处实现，但它已在另一个代码中完成并工作）。我被这个 tr 高度问题困住了......    CreateRow(0);    CreateRow(1);    CreateRow(2);        function CreateRow(iRow){        var Html_Content = document.getElementById("id_MainTable").innerHTML ;        Html_Content += StandardRow(iRow);        document.getElementById("id_MainTable").innerHTML = Html_Content;    }    function StandardRow(iRow){        var iColumn, Html_Content = "";        for (iColumn = 0; iColumn < 10; iColumn++){            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";        }        Html_Content += "</row></table>";             return Html_Content;    }      html, body{        height:100%;        width:100%;        margin: 0px;        padding: 0px;    }    table{        height:100%;        width:100%;    }      table tr{        height:33%;    }    table td{        width: 10%;        font-size: 5vmin;        text-align: center;        border: solid 1px;    }    <table id = "id_MainTable"></table>

Answer 1

一旦您纠正了表格标签问题，您可能仍然会遇到高度问题。我过去曾经使用过格式正确的 html。我的解决方案是为基于 Mozilla 的浏览器分配自己的属性值。

例子：

table tr{

  height:33%;

}

@-moz-document url-prefix('') {

  table tr{

    height:30%;

  }

}

可能有更好的方法，但这对我来说一直有效。希望有帮助。

Answer 2

不止一个问题

• 你不开始你的行<tr>

• 你用</row></table>而不是关闭你的行</tr>

• Chrome 将尝试“修复”无效的 HTML。您需要添加一个，<tbody></tbody>因为 Chrome 现在插入了多个 tbodies

CreateRow(0);

CreateRow(1);

CreateRow(2);

function CreateRow(iRow) {

  document.getElementById("id_MainTable").innerHTML += StandardRow(iRow);

}

function StandardRow(iRow) {

  let Html_Content = ["<tr>"]; // I prefer using an array

  for (let iColumn = 0; iColumn < 10; iColumn++) {

    Html_Content.push("<td id='Row" + iRow + "Col" + iColumn + "'>-</td>");

  }

  Html_Content.push("</tr>");

  return Html_Content.join("");

}

html,

body {

  height: 100%;

  width: 100%;

  margin: 0px;

  padding: 0px;

}

table {

  height: 100%;

  width: 100%;

}

table tr {

  height: 33%;

}

table td {

  width: 10%;

  font-size: 5vmin;

  text-align: center;

  border: solid 1px;

}

<table>

  <tbody id="id_MainTable"></tbody>

</table>

Answer 3

在这个函数中：

function StandardRow(iRow){

        var iColumn, Html_Content = "";

        for (iColumn = 0; iColumn < 10; iColumn++){

            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";

        }

        Html_Content += "</row></table>";     

        return Html_Content;

    } 

table您错误地关闭了标签。你的结果会是这样的：

<table id = "id_MainTable">

<td><td></row></table>

<td><td></row></table>

<td><td></row></table>

</table>

另外你应该Html_Content开始<tr>

将函数更改为：

function StandardRow(iRow){

        var Html_Content = "<tr>";

        for (var iColumn = 0; iColumn < 10; iColumn++){

            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";

        }

        Html_Content += "</tr>";     

        return Html_Content;

    }