Question

Hi i am creating a table within a div, but its not showing in the webpage . My html code is like

 <div id="right">
  <h2 id="right1">hello !</h2>
  <div id="previewWin">
  </div>
  <div id="welcome">
  </div>
</div>

CSS is like :

#right {
    float:right;
  width: 490px;
 padding-right: 110px;
      padding-top: 301px;
    }
    #welcome {
  margin-right: 20px;
}

#previewWin {
background-color: #decea2;
width: 150px;
height: 200px;
font: 1.0em arial, helvetica, sans-serif, larger, bold;
padding: 5px;
position: absolute;
visibility: hidden;
border: 1px  solid ;
overflow: hidden;
}

#previewWin h1, #previewWin h2 {
    font-size: 1.0em;
}

PreviewWin is a hidden div :

Javascript code:

function CreateInterface(){
var table=document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
tr.appendChild(td);
document.getElementById("welcome").appendChild(table);

}

The table is now showing in the explorer…Please help me out …And this finction CreateInterface triggers on an onclick event …Thanks in advance

Answer 1

You must have a <tbody> inside the <table> for you code to work in Internet Explorer:

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
table.appendChild(tbody);
tbody.appendChild(tr);