I am printing nout the table in javascript and accessing it in html. I have features within the code due to which I need to code the tables in javascript. Each time, the table is printed with random number of columns. I have a styling issue. As you can see in the attached image, Table1 to Table [6] spans the first row of the page while the seventh and eight table appears directly below Table[6]. I need Table[7] to appear from new line, exactly from where Table[9] is appearing. I looked into nowrap
and inline-block
but nothing is helping so far. Any ideas/help would be greatly appreciated!
<div class="card text-center">
<div class="card-header">
<h1>Page header</h1>
</div>
<div class="card-body">
<span id="mText"></span>
</div>
</div>
<script>
var pText = "";
var mText = document.getElementById("mText");
for(var i=1;i<40;i++){
pText += '<div class="col"><table><tr bgcolor="#E5E8E8"><th><h5 style="font-weight: bold;">Table['+i+']: </h5></th></tr>';
mText.innerHTML = pText;
for(var j=0;j<(Math.floor(Math.random() * (50 - 1 + 1)) + 1);j++){
pText += '<tr><td><h6>Jill</h6></td></tr>';
mText.innerHTML = pText;
}
pText += '</table></div>';
mText.innerHTML = pText;
}
</script>
Thanks!
Aucun commentaire:
Enregistrer un commentaire