static - 防止表格单元格中的文本换行——使用空列

Question

有谁知道如何防止表格单元格中的文本换行？这是针对表头的，表头比表头下的数据长很多，但我需要它只显示一行。列很宽也没关系。

我的(简化)表格的 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>

出于与页面上的 javascript 有关的原因，标题本身包含在 th 标记内的 div 中。

表格的标题换行到多行。这似乎只在表格足够宽时才会发生，因为浏览器试图避免水平滚动。不过，就我而言，我想要水平滚动。

th {
white-space: nowrap;

有问题，因为我有一个空表头

有什么想法吗？

Answer 1

table th, table td{
  white-space: nowrap !important;
}

那就行了。请记住添加 !important 以覆盖可能影响您要实现的样式的任何其他空白样式。

table th, table td{
  white-space: nowrap !important;
}

<table border="1">
<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>