<h2> <code>table-layout</code> استفاده از  ویژگی</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 طرح های افقی از جدول به محتویات سلول بستگی ندارند </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>

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