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

Question

我在Javascript中打印表格并在html中访问它。我在代码中有功能，因为我需要在Javascript中对表进行编码。每次，表格都随机打印。我有一个造型问题。正如您在附图中看到的那样，表1到表[6]跨越页面的第一行，而第七和第八表出现在表[6]的正下方。我需要Table [7]从新行出现，完全取自Table [9]出现的位置。我调查了nowrap和inline-block但到目前为止没有任何帮助。任何想法/帮助将不胜感激！

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

Answer 1

由于宽度似乎固定在每行6个表格，而高度是动态大小取决于元素，因此可以想到两个解决方案。

第一个解决方案是给每个表一个min-height css属性，因为它只是一个表，你只需要声明高度。

第二个解决方案为每6个具有display：block的表创建一行，如果i等于1，则在第一个for循环内部检查，或者当除以模块％6时，创建一个保存表的新行。 （不必是行可以是某种容器！