Add column to table

by webgleb

HTML

<table id="scroll-table">
  <tbody>
    <tr>
      <th><b>Text</b></th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      </tr>
      
      <tr>
      <th><b>Text</b></th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      <th>
        <div contenteditable="true">

        </div>
      </th>
      </tr>
  </tbody>
</table>
<br>
<button id="add_column">Add</button>
<button id="delete_column">Delete</button>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 20%;
}

td, th {
  border: 1px solid #E6ECF0;
  text-align: left;
  padding: 12px 12px 12px 12px;
}

div[contenteditable="true"] {
  text-align: center;
  width: 20px;
}

JavaScript

$(document).on('click', '#add_column', function(){
	$("tr").append("<th><div contenteditable=\"true\"></div></th>");
});

$(document).on('click', '#delete_column', function(){
 $('table tr th:last-child').remove();
});