html table 数据未填充列

Question

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

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’ 作为 table 的样板。在“get skeleton”中有一个 class 有 12 列。它将 table 分布在 12 列中。当我加载 html 时，table 分布在 12 行（根据需要）。但是，当我单击按钮隐藏 table，并重新单击以显示 table 时，table 不再占用 12 列。

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

我的table:

 <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

您在 table 中使用的 columns 和 eleven class 对应于 grid columns 而不是 table 列。他们应该继续 div.

There's a class 使网格的 table 全宽，它被称为 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 class 指定一行中有 11 列（可能的最大值为十二）。

table class、u-full-width 会让 table 知道占用所有可用的列 - 在本例中为全部 11。

除此之外，我还注意到您将 table 设置为之后的一个块，这导致 table“收缩”。

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

html table 数据未填充列

html table data not filling columns

javascript

html

html-table

skeleton-css-boilerplate