使用javascript创建dom表(IE)的列宽问题 [英] Column width problem using javascript create dom table (IE)
问题描述
我必须使用javascript创建一个表. Firefox显示预期结果，但对于IE，列宽是固定的.
我必须使用col标签来设置宽度，因为有时第一行可能会合并.我所需要做的就是创建一个严格按照程序输入的列宽显示的表.
在下面，我设置了一个非常简短的示例，该示例以与原始javascript函数类似的方式构造表.我还绘制了一个标尺，以帮助在屏幕上显示400px的正确宽度.第1栏的宽度应为100px，第2栏的宽度应为300px.
您可以看到运行时创建的表列宽度不是1:3大小.
Hi,
I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed .
I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program.
In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px.
You can see that the run time created table columns width are not in 1:3 size.
<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
推荐答案
尝试在
中将浅灰色更改为灰色
Try Changing lightgray To gray in
style.borderTop = "1px solid gray";
style.borderLeft="1px solid gray";
这篇关于使用javascript创建dom表(IE)的列宽问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
