Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: IE7 Javascript IE8 table
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>
Posted 16-Dec-10 20:21pm
Edited 16-Dec-10 20:22pm
v2
Comments
Toniyo Jackson at 17-Dec-10 1:22am
   
Checked spelling.

1 solution

Rate this: bad
good
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";
  Permalink  
v2

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

  Print Answers RSS
0 OriginalGriff 428
1 Maciej Los 249
2 BillWoodruff 199
3 /\jmot 180
4 Suraj Sahoo | Coding Passion 150
0 OriginalGriff 8,484
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,159
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 1 Jan 2011
Copyright © CodeProject, 1999-2014
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