HTML/CSS/Javascript-表格样式问题

我正在用Javascript打印表并用html访问它。我在代码中有一些特性，因此我需要用Javascript对表进行编码。每次，该表都会打印随机数目的列。我有一个造型问题。如附图所示，表到表[6]横跨页面的第一行，而第七和第八个表直接显示在表[6]的下方。我需要表[7]从新行显示，正好从表[9]显示的位置。我查看了nowrap和内联块，但到目前为止没有任何帮助。任何想法/帮助都将不胜感激

<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>

---

由于宽度似乎固定为每行有6个表，而高度则根据元素动态调整大小，因此想到了两种解决方案

第一个解决方案是为每个表指定一个min-height css属性，因为它是一个只需声明高度的表

---

第二种解决方案是为每6个具有display:block的表创建一行，您可以在第一个for循环中检查i是否等于1，或者在除以模块%6时创建一个保存该表的新行。不必是行也可以是某种容器

你能发布你当前的CSS吗