Column width problem using javascript create dom table (IE)

Question

0.00/5 (No votes)

See more:

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

<?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>

Posted 16-Dec-10 19:21pm

AleXX Zero

Updated 16-Dec-10 19:22pm

Toniyo Jackson

v2

Add a Solution

Comments

Toniyo Jackson 17-Dec-10 1:22am

Checked spelling.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AnupKumarYadav · Answer 1 · 2010-12-31T23:49:00

Solution 1

Try Changing lightgray To gray in

MIDL

style.borderTop = "1px solid gray";
                style.borderLeft="1px solid gray";

Posted 31-Dec-10 23:49pm

AnupKumarYadav

Updated 31-Dec-10 23:50pm

v2