html table data not filling columns

Question

I have a html table, I am toggling the table in and out of view by connecting a button to the following script:

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

I am using ‘get skeleton’ as a boiler plate for the table. The in ‘get skeleton’ there is a class that takes 12 columns. It spreads the table over 12 columns. When I load the html the table is spread out over 12 rows (as desired). However when I click the button to hide the table, and re-click to show the table the table is no longer occupying 12 columns.

The 12 columns are occupied by the table but the only 3 of the columns of the 12 show the data.

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

What’s the story there, how can that be fixed. its as if the data is only filling in the amount of columns that it has, instead of spreading the data out over all the columns.

before clicking:

after clicking re-click:

Answer 1

The columns and eleven classes you've used on your table correspond to grid columns not table columns. They should go on a div.

There's a class to make the table full width of the grid and it's called u-full-width.

Your HTML should look like this:

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

The first div creates a row, typically full length of the parent container.

The second div spits the row into columns, where the eleven class specifies that it's 11 columns inside a row (possible maximum is twelve).

The table class, u-full-width will let the table know to take up all the available columns - in this case all 11.

---

Besides the point here, I also notice that you set the table to be a block afterwards which is causing the table to "shrink".

You should be using: document.getElementById("displaytable2").style.display = "table"; To give the table behaviour back.