這段小代碼動態創建了一個表，但在不同的瀏覽器中它的工作方式并不相同。理想情況下，我需要動態設置行高（這本身就是一個我無法解決的問題），但是在嘗試弄清楚如何做到這一點時，我發現我的表格以不同的方式顯示，具體取決于我使用的瀏覽器使用。它適用于 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 關注
- 159 瀏覽
添加回答
舉報
0/150
提交
取消