Question

对于关注的表，最后一行用于指定表中各列的宽度（例如，最后一行的第一个单元格的{{1 }} 标签）。我无法控制任何宽度值。此类表的示例是：

style="width: 100px"

我要实现的是：如果单元格内容换行，则其HTML宽度必须大于<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>。

例如：

假设上表中的350px内容为550px长，因此在最后一行中，考虑到宽度约束（row 2 col 3），其内容将换行。在这种情况下，表格的300px的宽度应扩展到200px，与内容的像素长度相同。

如果column 3内容的像素长度为300px长，则表row 2 col 3的宽度应不小于400px，并且其内容应换成新的线。

我当前的想法：

我将每个单元格内容包装在column 3中，以测量每个单元格内容的像素长度。然后，我将检查是否需要根据宽度调整任何列的大小。

我当前想法的问题是，我可能需要遍历表中的许多单元格，还有其他更好的方法吗？

Answer 1

如果第2行第3列内容的像素长度为400px长，则表第3列的宽度不应小于350px，并且其内容应换行。

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

我无法控制任何宽度值。

您可以控制什么？如果您可以编写在页面中运行的javascript，则可以使用该javascript修改页面中已有的宽度。

如果由于表不适合其父项而使内容已经包装，span宽度是否会引起误解，实际上与td宽度相同？
如果只检查td元素的宽度，则只需检查一行，由于整个列的宽度相同，因此的后续行中的所有单元格都将具有相同的宽度。
实际上，单元格（或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>

Reactjs：如何有效检查表的单元格内容是否太长

1 个答案: