Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help~~ problem using javascript to create a table with proper column width IE

    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

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

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No body know?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •