当前位置: 首页 > 面试题库 >

如何防止表格单元格中的文字换行

饶滨海
2023-03-14
问题内容

有谁知道我如何防止表格单元格中的文本换行?这是用于表头的,其标题比其下的数据长很多,但是我只需要在一行上显示即可。如果列很宽也可以。

我的(简化的)表的HTML如下所示:

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

标题本身包装在th标记内的div中,原因与页面上的javascript有关。

该表将标题与多行包装在一起。这似乎仅在表足够宽时才会发生,因为浏览器试图避免水平滚动。不过,就我而言,我想水平滚动。

有任何想法吗?


问题答案:

看一下该white-space属性,如下所示:

th {
    white-space: nowrap;
}

这将强制的内容<th>显示在一行上。

在链接的页面中,以下是各种选项white-space

normal
此值指示用户代理折叠空白序列,并在必要时中断行以填充行框。

pre
此值可防止用户代理折叠空白序列。行仅在保留的换行符处断开。

nowrap
该值与’normal’一样折叠空白,但抑制文本内的换行符。

pre-wrap
此值防止用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。

前行
此值指示用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。



 类似资料:
  • 问题内容: 我想显示一个从数据库到表单元格的段落。 结果是一个大的1行,而忽略了它在数据库中的组织方式。例如忽略“输入”(换行) 我想完全按照它在数据库中的编写方式来显示它。 例如,如果段落保存如下: 我希望它完全像这样显示,而不是: 问题答案: 您想使用应用于适当的CSS 。为此,请对所有表单元格执行此操作,例如: 另外,如果您可以更改标记,则可以在内容周围使用标签。默认情况下,Web浏览器使用

  • 当我在excel、LibreOffice Calc或Google Sheets中打开我的CSV时,每个单元格的字符限制被超过,一个单元格中的数据溢出到相邻的单元格中。如何防止这种情况发生,使文件保持其原始结构?或者,是否有其他方法可以编辑此文件以避免此问题?或者,如果没有,有没有办法切断任何超出单元格字符限制的内容,以便我可以正确使用电子表格?

  • 问题内容: 这是整个页面*可包装的内容在main.css文件中定义 这是整个页面: 每当我提交时,它就会延伸。 此页面也在div内。我是否还需要设置div和表格的宽度? 问题答案: 使用该表,并在TD。 请参阅以下示例: 演示:

  • 我需要制作瓦丁8网格单元格文本换行。我试着在瓦丁论坛上关注这个链接。https://vaadin.com/forum/thread/16908210/vaadin-8-grid-wrap-long-lines 我的网格仅在每个单元格中包含字符串。 我有一个这样的风格生成器类: 我正在从Vaadin 6转换,所以我仍然使用旧主题() 在我的styles.css文件中,有: 在创建网格的类中,我有:

  • 问题内容: 我有一个表单,其中某处有一个提交按钮。 但是,我想以某种方式“捕获”提交事件并防止它发生。 有什么办法可以做到这一点? 我无法修改“提交”按钮,因为它是自定义控件的一部分。 问题答案: 与其他答案不同,返回仅是答案的 一部分 。考虑在return语句之前发生JS错误的情况… html 脚本 返回此处将不会执行,并且表单将以任何一种方式提交。您还应该致电以阻止Ajax表单提交的默认表单操

  • 问题内容: 我正在尝试实现本教程中描述的自定义TableRenderer 。我想让渲染器对每个给定单元格很长的文本进行换行。这个想法是,使用TextArea作为渲染器,因为它支持换行。但是,以下代码无法正常工作: 我将此渲染器设置为 但是单元格条目保持未包装状态。如果我添加到该方法,则所有单元格都按预期是黄色,但没有被包裹。 有任何想法吗? 更新: 正如Michael Borgwardt在评论中指