有谁知道我如何防止表格单元格中的文本换行?这是用于表头的,其标题比其下的数据长很多,但是我只需要在一行上显示即可。如果列很宽也可以。
我的(简化的)表的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有关。
th
该表将标题与多行包装在一起。这似乎仅在表足够宽时才会发生,因为浏览器试图避免水平滚动。不过,就我而言,我想水平滚动。
有任何想法吗?
看一下该white-space属性,如下所示:
white-space
th { white-space: nowrap; }
这将强制的内容<th>显示在一行上。
<th>
在链接的页面中,以下是各种选项white-space:
normal 此值指示用户代理折叠空白序列,并在必要时中断行以填充行框。 pre 此值可防止用户代理折叠空白序列。行仅在保留的换行符处断开。 nowrap 该值与’normal’一样折叠空白,但抑制文本内的换行符。 pre-wrap 此值防止用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。 前行 此值指示用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。
normal 此值指示用户代理折叠空白序列,并在必要时中断行以填充行框。
pre 此值可防止用户代理折叠空白序列。行仅在保留的换行符处断开。
nowrap 该值与’normal’一样折叠空白,但抑制文本内的换行符。
pre-wrap 此值防止用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。
前行 此值指示用户代理折叠空白序列。行在保留的换行符处断开,并在必要时填充行框。