html表格数据不填充列

Question

我有一个 html 表格，我通过将按钮连接到以下脚本来切换表格进出视图：

function show() {
if (document.getElementById("displaytable2").style.display === "none") {
  document.getElementById("displaytable2").style.display = "inline-block";
} else {
  document.getElementById("displaytable2").style.display = "none";
}
}

我使用‘get skeleton’ 作为表格的样板。 在“获取骨架”中有一个包含 12 列的类。它将表格分布在 12 列中。 当我加载 html 时，表格分布在 12 行（根据需要）。 但是，当我单击按钮隐藏表格并重新单击以显示表格时，表格不再占据 12 列。

12 列被表格占用，但 12 列中只有 3 列显示数据。

我的桌子：

 <div class="row">
       <table class="eleven columns" id="displaytable2" border="1px">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
    </div>

那里的故事是什么，如何解决。就好像数据只是填充了它所拥有的列数，而不是将数据分散到所有列中。

点击前：

点击后重新点击：

Answer 1

您在表上使用的columns 和eleven 类对应于grid columns 而不是表列。他们应该去一个div。

There's a class 使表格占满网格宽度，称为u-full-width。

您的 HTML 应如下所示：

<div class="row">
   <div class="eleven columns">
      <table class="u-full-width" id="displaytable2" border="1px">
         <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
         </tr>
         <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
         </tr>
         <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
         </tr>
      </table>
    </div>
</div>

第一个 div 创建一行，通常是父容器的全长。

第二个 div 将行拆分为列，eleven 类指定一行中有 11 列（可能最多为 12 列）。

表格类u-full-width 将让表格知道占用所有可用列 - 在本例中为全部 11 个。

---

除此之外，我还注意到您之后将表格设置为块，这导致表格“缩小”。

您应该使用：document.getElementById("displaytable2").style.display = "table"; 恢复 table 行为。