<div class="field-items">
  <div class="field-item even">
    <div id="playground-result">
      <table id="playground-property" style="border-collapse: collapse;">
        <tbody>
          <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
          </tr>
          <tr>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
          </tr>
          <tr>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
          </tr>
          <tr>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
            <td>Комірка</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="grid-x grid-margin-x">
      <p>Вибери потрібне значення для властивсті <b>border-collapse</b>:</p>
      <div id="playground-value" class="cell medium-12 large-6">
        <label><input type="radio" name="value" value="collapse" checked="">collapse</label>
        <label><input type="radio" name="value" value="separate">separate</label>
      </div>
      
      <div id="playground-code" class="cell medium-12 large-6">
        <pre>table {
  border-collapse: <span id="playground-code-value">collapse</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
      </div>
    </div>
  </div>
</div>
#playground-property {
border: 4px double black;
border-collapse: collapse;
}
#playground-property td {
border: 1px solid black;
  padding: 10px;
}
table{
  width: 100%;
  font-size: 20px;
}
#playground-value{
  margin: 15px;
  font-size: 20px;
  display: block;
}
pre{
  background: lightgrey;
  padding: 10px;
  font-weight: 700;
  font-size: 20px;
}
p{
  font-size: 18px;
  text-decoration: underline;
}
var radios = document.querySelectorAll('#playground-value input[type="radio"]'); function changeHandler(event) { document.getElementById('playground-property').style.borderCollapse = this.value; document.getElementById('playground-code-value').innerText = this.value; }
      Array.prototype.forEach.call(radios, function (radio) { radio.addEventListener('change', changeHandler); });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.