如何强制表格单元格内容换行？
这是整个页面*可包装的内容在main.css文件中定义
/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
white-space: normal;
}
这是整个页面：
<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry? entryId=${entry.entryId}" />
<table class="data_table vert_scroll_table">
</tr>
<tr>
<ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
</tr>
<c:forEach var="comments" items="${entry.comments}">
<tr id="id${comments.id}">
<td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
</tr>
</c:forEach>
<c:if test="${lock.locked || form.entryId < 0 }">
<%-- This is the row for adding a new comment. --%>
<tr id="commentRow">
<td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
<a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
</td>
</tr>
</c:if>
</table>
</ctl:vertScroll>
</form>
每当我提交时，它就会延伸。
此页面也在div内。我是否还需要设置div和表格的宽度？
问题答案：
使用table-layout:fixed该表，并word-wrap:break-word在TD。
请参阅以下示例：
<html>
<head>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
</body>
</html>
演示：
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
<table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
-
我想生成一个包含客户订单的表。（简化的）表格如下所示。如果客户有多个订单，我只需将客户信息添加到客户的第一行。因此，订单1至3属于客户1，订单4属于客户 这工作正常，除非我得到一个分页符/新页面。在这种情况下，表格如下所示： 但是我希望客户1在新页面的第一个客户单元格中重复，所以它看起来像这样： 我认为填充单元格可以通过组合页面/单元格事件来完成，但这需要将所有客户单元格的最小高度设置为填充的客户
-
如何将单词显示到列单元格内的下一行。我尝试过，但它对我无效。在上面的代码，但它不起作用。
-
问题内容： 我有一张桌子，应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一排应该伸展以填充可用空间。万一该行中单元格的内容超出了所需的高度，我希望使用overflow：hidden剪切内容。 不幸的是，表和行不遵守max-height属性。（这在W3C规范中）。当单元格中的文本过多时，表格将变高，而不是坚持指定的百分比。 如果我为其指定一个固定的高度（以像素为单位），则可以使表
-
这里有一个非常基本的例子，我试图根据单元格中存在的特定字符串值来给特定的单元格着色。我输入打印报表，然后点击返回“绿色”，返回“橙色”，等等...点，但在运行时，我只得到灰色和白色交替的行颜色，没有我特定的单元格颜色。我使用的css是直接从《瓦丁之书》中提取的，我认为这很简单。也许我遗漏了一些小事。 单元格样式生成器代码： CSS: 当我查看浏览器中实际呈现的内容时，这是单元格的样子：
-
问题内容： 有谁知道我如何防止表格单元格中的文本换行？这是用于表头的，其标题比其下的数据长很多，但是我只需要在一行上显示即可。如果列很宽也可以。 我的（简化的）表的HTML如下所示： 标题本身包装在标记内的div中，原因与页面上的javascript有关。 该表将标题与多行包装在一起。这似乎仅在表足够宽时才会发生，因为浏览器试图避免水平滚动。不过，就我而言，我想水平滚动。 有任何想法吗？ 问题答案