View Full Version : Please Help~~ problem using javascript to create a table with proper column width IE

12-16-2010, 05:50 AM
please help me~~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.

Please help me~~T_T

<?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">
<TD style="background-color:blue">
<TD style="background-color:green">
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>

Javascript inserted:

<div id="hi">

<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) {
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
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";

12-20-2010, 05:59 AM
No body know?