如何让一行的宽度适合表格中其他行的宽度？答案

【问题标题】：How to get a row's width to fit to the width of the other rows in a table?如何让一行的宽度适合表格中其他行的宽度？
【发布时间】：2016-10-23 18:11:00
【问题描述】：

在下表中，第一个单元格内容是动态生成的。第二个单元格中的长文本导致表格宽度超出第一个单元格所需的宽度。

如何让底部单元格换行而不是加宽表格？
我不能为第二个单元格使用固定宽度，因为第一个单元格内容直到运行时才知道。

<table border="1">
  <tr><td>name: <input type="text"></input></td></tr>
  <tr><td>blah blah blah blah blah blah blah blah blah blah</td></tr>
</table>

【问题讨论】：

添加了 gwt 标签，因为 Google Web Toolkit 似乎是您被锁定的东西，但在人们回复之前不要提及。
如果我没记错的话，我通过根据一些启发式条件设置宽度来解决它。

标签： html gwt html-table width

【解决方案1】：

首先，不要像你一样关闭你的输入，执行以下操作：

<input type="text" />

第二：只要给表格一个固定的宽度：

<table border="1" style="width: 400px;">
  <tr><td>name: <input type="text" /></td></tr>
  <tr><td>blah blah blah blah blah blah blah blah blah blah</td></tr>
</table>

啊，最后是第三个：不要使用表格进行布局。即使没有表格也可以完成表格。

【讨论】：

首先，输入只是一个例子。它代表一些动态生成的内容。其次，正如我所说，我不能给出固定的宽度（因为第一个）。最后，我不使用表格进行布局。我的框架 (GWT) 可以。
建议在表格上使用固定宽度，而不是在表格单元格上。这将导致文本换行而不是展开它的容器。
我希望表格宽度适合第一个表格单元格中组件所需的宽度。
我不认为您希望您的表无限增长。所以设置一个固定的大小是个好主意。您还可以设置最小宽度（和最大宽度），但第二行可能会将宽度增加到最大宽度。仅使用最大宽度第二行可能会增加宽度，但在特定宽度下，第二行的内容将被换行。
该表不会无限增长，仅根据第一行中的组件（在此通用表的每个特定实例中有所不同）。但是 max-width 不好，因为第一行的不同组件会有所不同。

【解决方案2】：

不知道为什么你说你不能使用固定宽度，因为你依赖于第一个单元格。您可以在运行时通过检查第二个单元格的值来计算此值，如果它比某个定义的宽度长，您可以将定义的宽度应用于您的单元格。

如果第二个单元格的输出不是很长（并且不会触发您的长度检查），那么您不需要添加任何宽度定义。

这对我来说似乎很简单，但我在这里的假设是您正在使用脚本语言来生成此内容，除非您的意思是这是 PURE html，在这种情况下，我会使用 JS 库来解决问题，例如jQuery 并对值进行相同的长度检查，如果触发，则为您的单元格添加宽度定义。

【讨论】：

html由GWT生成。真正的 html 要复杂得多。它是一个通用对话框，可以有任意组件，因此每个对话框都有不同的宽度。在我的通用对话框的底部有一个状态行，可能会显示不同的文本。如果状态文本很长，它应该换行到下一行，使对话框高一点，但不宽。
会用max-width: 200px; 之类的东西将你的输出包装在一个div 中吗？从技术上讲，可以使用 div 来防止内容将单元格扩展到超过您的预定义宽度。
否，因为宽度是未预定义的。

【解决方案3】：

我也希望有一个解决方案。这个其他问题的答案表明没有简单的答案......

HTML TD wrap text

【讨论】：