程序员经验分享-hwhale

如何强制表格单元格内容换行？

2023-12-03

这是整个页面 *wrappable 在 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 和表格的宽度吗？


Use table-layout:fixed在表中和word-wrap:break-word在道明。

看这个例子：

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

DEMO:

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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

htmltable

如何强制表格单元格内容换行？ 的相关文章

  • 如何解决此错误：属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

  • 如何保留用户的输入打印？

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • 如何将 HTML 转换为 Markdown？

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu

  • 在 Android 上禁用标注（上下文菜单）

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在

  • 如何使自定义 Web 组件可聚焦？

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信

  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga

  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON，以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div

  • div 中的中心文本？

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical

  • Sass：@use 出错，未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb

  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像

  • Bootstrap：如何将按钮组对齐在中心（垂直）

    在下面的代码中

  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50

  • 如何在Yii框架中向Form添加类？

    我在 Yii 中有一个表单 我想向该表单添加一个类

  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求

  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象？

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • Jupyter 中的内联动画

    我有一个 python 动画脚本 使用 matplotlib 的 funcAnimation 它在 Spyder 中运行 但不在 Jupyter 中运行 我尝试过遵循各种建议 例如添加 matplotlib inline 并将 matplo

  • 分配与全局变量同名的局部变量时出错

    将全局函数或局部封闭函数分配给同名的局部变量时 我看到错误 下面的代码说明了这个问题 其中f 运行良好 同时g 引发错误 看来 python 知道这一点a正在本地分配 因此它表示所有对a现在都是本地的 甚至之前的参考文献a实际上是本地分配的

  • 在 eclipse 中运行 scala 的配置

    嗨 我必须运行一个 scala 程序 我收到错误主类未找到 然后我打开首选项并在 scala 应用程序中 主类列未指定主类 你能告诉我我必须在该栏中填写什么才能运行我的程序吗 请帮助我 提前致谢 您能提供任何额外信息吗 我刚刚创建了一个 S

  • 递归对象和原子对象的定义是什么？

    R 文档 says is atomic回报TRUE if x是原子类型 或NULL and FALSE否则 is recursive回报TRUE if x有一个递归 list类似 结构 和FALSE否则 is atomic对于原子类型是正确

  • 如何反转 JavaScript 中的正则表达式？

    我有一个字符串 A 想测试另一个字符串 B 是否不属于它 这是一个非常 简单的正则表达式 其结果可以在之后反转 我可以做 foobar test email protected 然后反转它 如下所示 foobar test email pr

  • 为什么只有 1 行的 DataTable.Load 结果表现得好像是 DataRow 而不是 DataTable？

    我想查询不同服务器上的两个数据库以获取相同类型的信息 并将结果合并到一个列表中 我创建了这个示例 它可以工作 但前提是第一个服务器至少返回two rows 该示例使用整数列表 1 5 但我连接两个字符串列表的原始代码也存在相同的问题 qui

  • Mac OS X：我应该在哪里存储作为捆绑包提供的游戏的保存游戏？

    我正在将 Windows 游戏移植到 Mac OS X 我想知道应该在哪里存储游戏数据 例如保存的游戏 用户配置文件等 以及如何在 C 中以编程方式检索该路径 该游戏将按照规定作为 现代捆绑包 提供here 保存在下面 库 应用程序支持 您

  • 如何获得唯一的智能卡ID？

    我正在寻找一种方法来为我使用的每张智能卡找到唯一的号码 我听说每张卡都有唯一的 IC 制造日期 IC 序列号和 IC 批次标识符 我如何从我的卡中获取这些信息 当然 每个硬件供应商都会将上述信息集成到芯片中 不幸的是 这留下了以下问题 操作

  • （单元）测试 python 信号处理程序

    我有一个简单的 Python 服务 其中有一个无限执行某些操作的循环 根据各种信号 sys exit 0 被称为 这导致SystemExit如果可以的话 应该进行一些清理 在测试中 即标准unittest TestCase 我想测试此清理是

  • postgres 中索引元组的最大大小是多少？

    我引用的是https www postgresql org docs 11 sql createindex html关于INCLUDE clause 在向索引添加非键列 尤其是宽列 时保持保守是明智的做法 如果索引元组超过索引类型允许的最大

  • 如何关闭 show() 窗口但保持图形处于活动状态？

    如果我创建一个图形然后执行 plt close from matplotlib import pyplot as plt fig1 plt figure fig2 plt figure fig1 show plt close fig1 sh

  • 在chart.js中，如果从移动设备访问，是否可以隐藏条形图的x轴标签/文本？

    在chart js中 是否可以隐藏x axis如果从移动设备访问 则条形图的标签 文本 我想隐藏 删除标签x axis即 一月 二月 等 他们添加了这个选项 2 1 4 也许更早一点 有它 var myLineChart new Chart

  • 执行指令和读/写数据时，x86 如何处理字节寻址和字寻址？

    所以我正在学习 x86 的工作原理 并且遇到过人们说它是字节寻址的 但可以读取字 双字等 处理器如何决定使用哪种方法以及何时使用 例如 为了访问下一条指令以及当用户想要读 写存储器时 使用哪种寻址模式 每个内存访问都有一个由机器代码指令指定

  • OData 模型不起作用

    我正在尝试使用expand我的 XML 视图中的选项 但它没有产生任何数据 正如我在 网络 选项下的调试中看到的那样 数据来自后端 但 XML 视图中似乎存在一些绑定问题 组件 js sap ui define sap ui core UI

  • npm 相当于纱线分辨率？

    有没有一个npm相当于纱线分辨率功能 npm package json 中没有提及它docs 例如我想安装 email protected 以及 3 3 2 中的依赖项之一 lerna publish 目前正在这样做yarn像这样 但更喜欢

  • 如何在python中修改指定位置添加多行？

    我有一个数据框 我想按以下方式复制和行 d pd DataFrame col1 a b c d col2 12 13 14 16 所需输出 想要复制行 a1 a2 b1 b2 col1 col2 a 12 a1 12 a2 12 b 12

  • Pythonic 自定义排序字母等级“D”、“C-”、...、“A+”？

    有没有比这更 Pythonic 紧凑 直观的方法来对字母等级进行排序 不使用自定义字典 grades B C B C A D B C A D A sorted grades key lambda g g 0 index g 1 A A A

  • 在 C++11 中使用智能指针包装旧的 C 结构并自动释放它们

    我在用着Word Net 一个由普林斯顿大学在九十年代开发的旧 C 库 该库是用 C 编写的 仅显示标头 但不显示其实际实现 我使用的唯一结构是 SynsetPtr 我调用的两个函数是 findtheinfo ds traceptrs ds

  • 通过添加 List() 和另一个模型类来执行迁移

    我有以下型号 class Area Object Specify properties to ignore Realm won t persist these override static func ignoredProperties g

  • 如何强制表格单元格内容换行？

    这是整个页面 wrappable 在 main css 文件中定义 Wrappable cell Add this class to make sure the text in a cell will wrap By default dat

热门标签