Одинаковые ячейки таблиц

Question

Не могу реализовать одну идею. Есть таблицы, при описании текста в ячейки, ячейки увеличиваются, а у остальных таблиц нет, мне нужно, чтобы ячейки и в остальных таблицах тоже увеличивались (не только первого столбца), их может быть много и в этих столбцах тоже ячейки должны увеличиваться.

Буду очень благодарен за помощь.

_{Был подобный вопрос уже был задан, но там код работает не так, как нужно мне.}

Answer 1

Насколько я понял вам скорее нужен JavaScript, на одном только css у вас не получиться так сделать. Так как вам нужно динамически меня размер не связанных ячеек.

Answer 2

Как-то так

let table = document.querySelectorAll("table");
let max = 0;

for (let temp = 0; temp < table.length; temp++) {
  let tbody = table[temp].querySelector("tbody");

  for (let i = 0; i < tbody.children.length; i++) {
    let tr = tbody.querySelectorAll("tr");
    for (let j = 0; j < tr[i].children.length; j++) {
      if (tr[i].children[j].offsetWidth > max) max = tr[i].children[j].offsetWidth;
    }
  }

  for (let i = 0; i < tbody.children.length; i++) {
    let tr = tbody.querySelectorAll("tr");
    for (let j = 0; j < tr[i].children.length; j++) {
      tr[i].children[j].style.width = max + "px";
    }
  }
}

td {
  border: 2px solid #000;
  text-align: center;
}

<h1>Таблица 1</h1>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>Длинее всех</td>
  </tr>
</table>

<h1>Таблица 2</h1>
<table>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
</table>

<h1>Таблица 3</h1>
<table>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
</table>

Answer 3

Возможно, что Вам подойдёт вариант с одной таблицей, но с несколькими секциями <tbody> (JS здесь, только для того, чтобы размножить секции, добавить интерактивность и не писать "простыню" HTML) :

/* For example only --> */ let table = document.querySelector('table'), tbody = document.querySelector('tbody'); for (let i = 2; i < 4; i++) { let clone = tbody.cloneNode(true); clone.querySelector('th[colspan]').textContent = `Таблица ${i}`; table.append(clone); } table.querySelectorAll('td').forEach(el => el.contentEditable = true);

table { border-collapse: collapse; }

tbody { box-shadow: inset 0 1px 0 0 #000;}
tbody:not(:last-of-type)::after { content: ""; display: block; padding: 1em; }

th { padding: 0.5em; box-shadow: inset -1px -1px 0 #000; background-color: #0004; }
th:first-of-type { box-shadow: inset -1px -1px 0 #000, inset 1px 0 0 #000; }

td { padding: 0.5em; box-shadow: inset -1px -1px 0 #000; }

<table>
  <tbody>
    <tr><th colspan="5">Таблица 1</th></tr>
    <tr><th></th><th>Колонка 1</th><th>Колонка 2</th><th>Колонка 3</th><th>Колонка 4</th></tr>
    <tr><th>Строка 1</th><td>Попробуйте</td><td>изменить</td><td>текст в этих</td><td>ячейках</td></tr>
    <tr><th>Строка 2</th><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

БЛОГ НА HUSL

Одинаковые ячейки таблиц

Ответы (3 шт):