Артур К.

Думаю, тут вы найдете ответ на этот вопрос и даже больше.

html полностью готовить на стороне клиента на JS

— в вашем будет значить примерно следующее:

<tbody>
    <?php
  $sql = "SELECT * FROM test_table2 ";
  $sql = mysqli_query($db, $sql);
  while ($result = mysqli_fetch_array($sql))
  {
  echo "<tr><td>".$result['Alphabetic']."</td><td>".$result['Numeriс']."</td><td>".$result['Date']."</td><td>".$result['Unsortable']."</td></tr>\n"; 
  }
    ?>
  </tbody>

этот блок будет заменен на примерно такое (в псевдокоде):

<?php
  $sql = "SELECT * FROM test_table2 ";
  $sql = mysqli_query($db, $sql);
  $return = [];
  while ($result = mysqli_fetch_array($sql))
  {
     $return[] = $result; // Здесь просто собираем данные в одну переменную
  }
 ?>

 <script>
<? echo "var resultArr='".json_encode($return)."'"; ?> // сюда мы передали переменную в JS
// тут должен быть какой-то JS-шаблонизатор, который разберет массив и сформирует таблицу по шаблону
</script>
<tbody>
</tbody>

Вот пример шаблонизатора loDash, который используется в составе удобной библиотечки underscore

P.s. этот пример не для продакшена, но для понимания механизма

Я бы делал HTML-макеты. Это, похоже, для вас проще.
Если у вас не ERP с конструктором, и нет требования, чтобы "блондинка верстала отчет", то делайте через HTML. Так проще)

Для справки ссылки на CSS-правила оставили выше

Рекомендую серединное решение между jq и react/angular — это небольшой backbone. Он так умеет.
Могу подробно расписать с описанием преимуществ и всё такое, но будет продуктивнее, если вам удастся самостоятельно найти в этом плюсы для себя.
Кстати, весит это чудо 6.3кб для прода.

Еще одно не менее простое решение — это реализации на бутстрапе. Вот один пример, первый в гугле по запросу "editable table bootstrap".

И, скорее всего, эти два решения будет выгодно объединить. Бутстрап будет шаблоном для бэкбона, который в свою очередь будет заниматься синхронизацией данных и отправкой результата редактирования на сервер.