javascript - 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

if the pixel length of row 2 col 3 content is 400px long, then width of column 3 of the table should not be less than 350px and its content should wrap into new line.

如果第 3 列是 400px 宽，你不会将宽度设置为 400px 然后内容不会换行吗？

I have no control over any of the width values.

你能控制什么？如果您可以编写在页面中运行的 javascript，则可以使用它来修改已经存在的任何宽度。

1. 如果内容已经换行，因为表格不适合其父项，span 宽度是否会产生误导，实际上与 td 相同宽度？
2. 如果您只检查 td 元素的宽度，您只需检查一行，后续行中的所有单元格将具有相同的宽度，因为整列具有相同的宽度。
3. 实际上，单元格(或 col 元素)上的 max-width 在这里不起作用吗？如果没有，您正在寻找它不提供的什么行为？ (见下面的代码块)

您的表格是否有任何 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>