Слияние ячеек в HTML Таблица без изменения структуры таблицы

Question

В моей таблице HTML есть пара столбцов и строк.

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

См. Два снимка экрана ниже.

Html Таблица со всеми ячейками, имеющими данные:

Объединены ячейки, хотя все ячейки имеют данные:

Код

<table border=1>
  <tr>
    <th>
      First Column
    </th>
    <th>
      Second Column
    </th>
    <th>
      Third Column
    </th>
  </tr>
  <tr>
    <td>
      First Cell
    </td>
    <td>
      Second Cell
    </td>
    <td>
      Third Cell
    </td>
  </tr>
  <tr>
    <td>
      Forth Cell
    </td>
    <td ColSpan=2>
      Fifth Cell
    </td>
    <td ColSpan=2>
      Sixth Cell
    </td>
  </tr>
  <tr>
    <td>
      Seventh Cell
    </td>
    <td>
      Eighth Cell
    </td>
    <td>
      Ninth Cell
    </td>
  </tr>
</table>

Answer 1

похоже, вам нужно только спрятать шестую ячейку

Возможный пример:

td[ColSpan]+td{display:none;

<table border=1>
  <tr>
    <th>
      First Column
    </th>
    <th>
      Second Column
    </th>
    <th>
      Third Column
    </th>
  </tr>
  <tr>
    <td>
      First Cell
    </td>
    <td>
      Second Cell
    </td>
    <td>
      Third Cell
    </td>
  </tr>
  <tr>
    <td>
      Forth Cell
    </td>
    <td ColSpan=2>
      Fifth Cell
    </td>
    <td>
      Sixth Cell
    </td>
  </tr>
  <tr>
    <td>
      Seventh Cell
    </td>
    <td>
      Eighth Cell
    </td>
    <td>
      Ninth Cell
    </td>
  </tr>
</table>

Вы также можете посмотреть на display: grid и display: содержимое, чтобы переопределить макет таблицы в grid-макет и по-прежнему отображать: ни один для шестого клетка для сокрытия.

table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: max-content;
  padding: 2px;
  grid-gap: 2px;
}

tbody,
tr {
  display: contents;
}

tr:nth-child(3) td:nth-child(2) {
  grid-column: auto / span 2;
}

tr:nth-child(3) td:nth-child(3) {
  display: none;
}

<table border=1>
  <tr>
    <th>
      First Column
    </th>
    <th>
      Second Column
    </th>
    <th>
      Third Column
    </th>
  </tr>
  <tr>
    <td>
      First Cell
    </td>
    <td>
      Second Cell
    </td>
    <td>
      Third Cell
    </td>
  </tr>
  <tr>
    <td>
      Forth Cell
    </td>
    <td>
      Fifth Cell
    </td>
    <td>
      Sixth Cell
    </td>
  </tr>
  <tr>
    <td>
      Seventh Cell
    </td>
    <td>
      Eighth Cell
    </td>
    <td>
      Ninth Cell
    </td>
  </tr>
</table>

С помощью javscript вы можете добавить атрибут colspan, а также скрыть шестую ячейку:

let rowCellSpan = document.querySelector("tr:nth-child(3) >:nth-child(2)");
let rowCellHidden = document.querySelector("tr:nth-child(3) >:nth-child(3)");
rowCellHidden.style.display = "none";
rowCellSpan.setAttribute('colspan', '2');

<table border=1>
  <tr>
    <th>
      First Column
    </th>
    <th>
      Second Column
    </th>
    <th>
      Third Column
    </th>
  </tr>
  <tr>
    <td>
      First Cell
    </td>
    <td>
      Second Cell
    </td>
    <td>
      Third Cell
    </td>
  </tr>
  <tr>
    <td>
      Forth Cell
    </td>
    <td>
      Fifth Cell
    </td>
    <td>
      Sixth Cell
    </td>
  </tr>
  <tr>
    <td>
      Seventh Cell
    </td>
    <td>
      Eighth Cell
    </td>
    <td>
      Ninth Cell
    </td>
  </tr>
</table>