<h2>Using the <code>table-layout</code> property</h2>

<table id="t" class="fixed">
  <thead>
    <tr>
      <th>1-1</th>
      <th>1-2</th>
      <th>1-3</th>
      <th>1-4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2-1 Example text goes here. Example text goes here.</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
  </tfoot>
</table>

<button class="tl">TOGGLE TABLE-LAYOUT: FIXED</button>

<p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  padding: 14px;
  text-align: center;
}

table {
  width: 100%;
  margin: 20px auto;
  table-layout: auto;
}

.fixed {
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th,
td {
  padding: 10px;
  border: solid 1px;
  text-align: center;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}

var tlBtn = document.querySelector('.tl'),
    tbl = document.getElementById('t');

tlBtn.addEventListener('click', function() {
  tbl.classList.toggle('fixed');
}, false);