Reactjs: как эффективно проверить, что содержимое ячейки таблицы слишком длинное

Question

Для интересующей таблицы последняя строка используется для указания ширины столбцов в таблице (например, первая ячейка последней строки может иметь style="width: 100px" в своем теге <tr>). Я не имею никакого контроля над любым из значений ширины. Пример такой таблицы:

<table border="1">
    <tr>
       <th>row 1 header</th>
       <td>row 1 col 2</td>
       <td>row 1 col 3</td>
    </tr>
    <tr>
       <th>row 2 header</th>
       <td>row 2 col 2</td>
       <td>row 2 col 3, lots of content...............</td>
    </tr>
    <tr>
       <td style="width: 160px">last row col 1</td>
       <td style="width: 130px">last row col 2</td>
       <td style="width: 200px">last row col 3</td>
    </tr>
</table>

Я хочу реализовать следующее: если содержимое ячейки переносится на новую строку, то его ширина HTML должна быть больше 350px и меньше 550px.

Например:

предположим, что содержимое row 2 col 3 в таблице выше имеет длину 300px, поэтому его содержимое переносится в новую строку с учетом ограничения ширины (200px) в последней строке. В этом случае ширина column 3 таблицы должна составлять 300px, равную длине в пикселях содержимого.

Если длина пикселя контента row 2 col 3 равна 400px, то ширина column 3 таблицы должна быть не менее 350px, а ее содержимое должно быть перенесено в новую строку.

Моя текущая идея:

• Я оберну каждое содержимое ячейки в <span> tag, чтобы измерить длину пикселя каждого содержимого ячейки. Затем я проверю, нужно ли изменять размеры столбцов по ширине.

Проблема с моей нынешней идеей заключается в том, что мне может понадобиться перебирать множество ячеек в таблице, есть ли другой лучший подход?

Answer 1

если длина пикселя содержимого строки 2 столбца 3 равна 400px, то ширина столбца 3 таблицы должна быть не менее 350px, а его содержимое должно быть перенесено в новую строку.

Если столбец 3 имеет ширину 400px, разве вы не установите ширину 400px, и тогда содержимое не будет перенесено?

У меня нет контроля над значениями ширины.

Что вы контролируете? Если вы можете написать javascript, который запускается на странице, вы можете использовать его для изменения ширины, которая уже есть.

1. Если содержимое уже переносится, потому что таблица не помещается в родительский элемент, разве ширина span не будет вводить в заблуждение и фактически будет такой же, как ширина td?
2. Если вы просто проверите ширину элемента td, вам нужно будет проверить только одну строку, все ячейки в последующих строках будут иметь одинаковую ширину, поскольку весь столбец имеет одинаковую ширину.
3. На самом деле, max-width на ячейках (или элементе col) здесь не работает? Если нет, какое поведение вы ищете, что оно не обеспечивает? (см. ниже блок кода)

Будут ли на вашем столе rowspan клетки? Это усложнит ситуацию.

let tds = document.querySelectorAll("td,th");
for (let i = 0; i < tds.length; i++) {
  log.innerText += getComputedStyle(tds[i]).width + "_";
}

<table border="1">
    <tr>
       <th>row 1 header</th>
       <td>row 1 col 2</td>
       <td>row 1 col 3</td>
    </tr>
    <tr>
       <th>row 2 header</th>
       <td>row 2 col 2</td>
       <td>row 2 col 3, lots of content......................</td> <!-- I made this non-breakable word even longer -->
    </tr>
    <tr>
       <td style="max-width:550px">last row col 1</td> <!-- add max-width and let the table layout algorithm sort it out -->
       <td style="max-width:550px">last row col 2 last row col 2 last row col 2</td>
       <td style="max-width:550px">last row col 3</td>
    </tr>
</table>

<div id=log></div>