Как верстать заголовок таблицы чтобы можно было потом изменять ширину ячеек перетаскиванием?

Для того чтобы верстать заголовок таблицы с возможностью изменять ширину ячеек перетаскиванием, мы можем использовать технику под названием "Resizing Header Columns". Эта техника основана на использовании CSS свойств и JavaScript для изменения ширины ячеек при перетаскивании.

Вот подробная инструкция о том, как реализовать эту функциональность:

1. Создайте HTML разметку таблицы и включите в нее стили из CSS.

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <!-- ...добавьте ячейки заголовка таблицы по вашему желанию... -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <!-- ...добавьте остальные ячейки таблицы... -->
    </tr>
  </tbody>
</table>

2. Добавьте CSS стили для таблицы и заголовка таблицы.

table {
  width: 100%;
}

th {
  background-color: #f5f5f5;
  cursor: ew-resize;
}

3. Добавьте JavaScript для обработки событий перетаскивания и изменения ширины ячеек.

// Получаем все заголовки колонок
const headers = document.querySelectorAll("th");

// Проходим по каждому заголовку колонки
headers.forEach(function (header) {
  // Создаем переменные для хранения начального состояния перетаскивания
  let startX;
  let startWidth;

  // Добавляем обработчик события начала перетаскивания
  header.addEventListener("mousedown", function (e) {
    startX = e.clientX;
    startWidth = header.offsetWidth;
    header.classList.add("resizing");
  });

  // Добавляем обработчик события перемещения мыши при перетаскивании
  document.addEventListener("mousemove", function (e) {
    if (header.classList.contains("resizing")) {
      // Вычисляем новую ширину ячейки
      const width = startWidth + (e.clientX - startX);

      // Устанавливаем новую ширину ячейки
      header.style.width = `${width}px`;
    }
  });

  // Добавляем обработчик события окончания перетаскивания
  document.addEventListener("mouseup", function (e) {
    if (header.classList.contains("resizing")) {
      header.classList.remove("resizing");
    }
  });
});

4. Добавьте стили CSS для класса resizing, чтобы изменить курсор при перетаскивании.

.resizing {
  cursor: col-resize;
}

Теперь, когда вы запустите этот код, вы сможете изменять ширину ячеек таблицы, перетаскивая заголовки колонок влево или вправо. Это обеспечит гибкость в изменении ширины ячеек таблицы и поможет вам создать настраиваемый интерфейс для пользователей.