这段小代码动态创建了一个表，但在不同的浏览器中它的工作方式并不相同。理想情况下，我需要动态设置行高（这本身就是一个我无法解决的问题），但是在尝试弄清楚如何做到这一点时，我发现我的表格以不同的方式显示，具体取决于我使用的浏览器使用。它适用于 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>
3 回答
慕桂英4014372
TA贡献1871条经验 获得超13个赞
一旦您纠正了表格标签问题，您可能仍然会遇到高度问题。我过去曾经使用过格式正确的 html。我的解决方案是为基于 Mozilla 的浏览器分配自己的属性值。
例子：
table tr{
height:33%;
}
@-moz-document url-prefix('') {
table tr{
height:30%;
}
}
可能有更好的方法，但这对我来说一直有效。希望有帮助。
墨色风雨
TA贡献1853条经验 获得超6个赞
不止一个问题
你不开始你的行
<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>
Cats萌萌
TA贡献1805条经验 获得超9个赞
在这个函数中：
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;
}
- 3 回答
- 0 关注
- 80 浏览
添加回答
举报
0/150
提交
取消