HTML表格格式问题答案

【问题标题】：HTML Table Format QuestionHTML表格格式问题
【发布时间】：2011-08-19 17:11:34
【问题描述】：

我有一个包含两列的 HTML 表格。对于最后一行，我希望发生以下情况：

将有一个跨越两列的单元格。 (colspan = "2") 这个单元格的宽度不会超过表格的宽度。每当该单元格中的文本变得太大时，我希望它跨越另一行，但不增加表格的宽度。问题是，我希望表格的宽度尽可能大，以包含两列而不扩展到另一行（不包括最后一行）。

编辑：我所拥有的不起作用。问题在于，如果“非常长的文本”变得太长，那么它会扩展其他“文本”消息而不是添加新行。

<table>
<tr><td>text</td><td>text</td></tr>
<tr><td colspan="2">really long text</td></tr>
</table>

【问题讨论】：

到目前为止你尝试过什么？
您当前的哪些标记不起作用？
考虑修改您的问题，这是非常低质量的，发布标记，发布您尝试过的内容。
抱歉，希望现在更清楚一点

标签： html css

【解决方案1】：

您需要使用“word-wrap: break-word;”来设置您的 TD 样式并为表格或 TD 设置最大宽度。

<table><tbody>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2" style="max-width:40px; word-wrap: break-word;">really long textsadfadfadfadfadfadsfadfadsfadfadsfasdfasdfasdfasdfasdfasdfasdfasdfa</td>
  </tr>
</tbody></table>

这将生成这样的表格（无边框），如果文本长到适合宽度，则最后一行的高度会增加：

【讨论】：

@WillHaack - 请参阅 jsfiddle.net/uDGbm 以获取您可以使用的小提琴示例。

【解决方案2】：

在你的最后一行，将内容包装在一个 div 中并给它一个宽度，比如 100%，这样它不会增加表格的宽度，而只是环绕。

<td colspan="2">
  <div style="width:100%"> The content here</div>
</td>

由于您将此问题标记为 html 和 css，我必须告诉您，如果您希望内容动态创建新行，则必须使用 javascript。没有脚本是不可能的，至少我不知道。

【讨论】：