Click here to Skip to main content
13,447,026 members (42,380 online)
Rate this:
Please Sign up or sign in to vote.
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" "">
<html  xmlns="" 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.appendChild(testTable = document.createElement("table"));
        with (testTable) {
            style.width = "400px";
            appendChild(testCol = document.createElement("col"));
   = 100 + 'px';
            appendChild(testCol = document.createElement("col"));
            // = 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";




Posted 16-Dec-10 19:21pm
Updated 16-Dec-10 19:22pm
Toniyo Jackson 17-Dec-10 1:22am
Checked spelling.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Try Changing lightgray To gray in

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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03-2016 | 2.8.180318.2 | Last Updated 1 Jan 2011
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100