這段小代碼動(dòng)態(tài)創(chuàng)建了一個(gè)表，但在不同的瀏覽器中它的工作方式并不相同。理想情況下，我需要?jiǎng)討B(tài)設(shè)置行高（這本身就是一個(gè)我無(wú)法解決的問(wèn)題），但是在嘗試弄清楚如何做到這一點(diǎn)時(shí)，我發(fā)現(xiàn)我的表格以不同的方式顯示，具體取決于我使用的瀏覽器使用。它適用于 Firefox 和 IE，但不適用于 Chrome。在 Chrome 中，第一行幾乎占據(jù)了表格的全部高度，為其他行留下了很少的空間。順便說(shuō)一下，這段代碼只創(chuàng)建了 3 行，但稍后它將擦除其原始內(nèi)容并創(chuàng)建 5 行具有不同內(nèi)容的行（擦除和重新創(chuàng)建部分未在此處實(shí)現(xiàn)，但它已在另一個(gè)代碼中完成并工作）。我被這個(gè) tr 高度問(wèn)題困住了...... 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貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊
一旦您糾正了表格標(biāo)簽問(wèn)題，您可能仍然會(huì)遇到高度問(wèn)題。我過(guò)去曾經(jīng)使用過(guò)格式正確的 html。我的解決方案是為基于 Mozilla 的瀏覽器分配自己的屬性值。
例子：
table tr{
? height:33%;
}
@-moz-document url-prefix('') {
? table tr{
? ? height:30%;
? }
}
可能有更好的方法，但這對(duì)我來(lái)說(shuō)一直有效。希望有幫助。
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊
不止一個(gè)問(wèn)題
你不開始你的行
<tr>你用
</row></table>而不是關(guān)閉你的行</tr>Chrome 將嘗試“修復(fù)”無(wú)效的 HTML。您需要添加一個(gè)，
<tbody></tbody>因?yàn)?Chrome 現(xiàn)在插入了多個(gè) 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貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超9個(gè)贊
在這個(gè)函數(shù)中：
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您錯(cuò)誤地關(guān)閉了標(biāo)簽。你的結(jié)果會(huì)是這樣的：
<table id = "id_MainTable">
<td><td></row></table>
<td><td></row></table>
<td><td></row></table>
</table>
另外你應(yīng)該Html_Content開始<tr>
將函數(shù)更改為：
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 關(guān)注
- 166 瀏覽
添加回答
舉報(bào)
0/150
提交
取消