<p>Вибери потрібне значення для <code>table-layout</code>:</p>

<div class="inputs">
  <input id="auto" checked name="table-layout" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.</message>
  
  <input id="fixed" name="table-layout" type="radio"/>
  <label for="fixed">fixed</label>
  <message for="fixed">Ширина колонок в цьому випадку визначається за допомогою тега <col>, або обчислюється на основі її першого рядка. </message>
</div>

<p id="message">Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.</p>

<hr>

<table id="block">
  <tr>
    <th>Заголовок</th>
    <th>Заголовок</th>
    <th>Заголовок</th>
  </tr>
  <tr>
    <td>Клітинка</td>
    <td>Клітинка</td>
    <td>Клітинка</td>
  </tr>
  <tr>
    <td>Клітинка</td>
    <td>Клітинка</td>
    <td>Клітинка</td>
  </tr>
</table>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  border: 1px solid #666;
  width: 200px;
}

td, th {
  border: 1px solid #666;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}
var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('table-layout', $(this).attr('id'));
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js