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

【问题标题】：HTML/CSS/Javascript - table styling issueHTML/CSS/Javascript - 表格样式问题
【发布时间】：2018-02-13 17:45:25
【问题描述】：

我正在用 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>

【问题讨论】：

你能发布你当前的 CSS

标签： javascript html css random html-table

【解决方案1】：

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

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

第二种解决方案为每 6 个具有 display:block 的表创建一行，如果 i 等于 1 或除以模块 % 6 创建一个包含表的新行，您将在第一个 for 循环中检查。（不一定是 row 也可以是某种容器！

【讨论】：