mardi 13 février 2018

HTML/CSS/Javascript - table styling issue

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!

enter image description here




Aucun commentaire:

Enregistrer un commentaire