首页 文章

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

提问于
浏览 次
1

有谁知道如何防止表格单元格中的文本被包装？这是一个表的 Headers ， Headers 比它下面的数据长很多，但我需要它只显示一行 . 如果色谱柱很宽，也没关系 .

我（简化）表的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>

Headers 本身包含在th标签内的div中，原因与页面上的javascript有关 .

table 出来的 Headers 包裹在多条线上 . 这似乎只发生在表足够宽时，因为浏览器试图避免水平滚动 . 但就我而言，我想要水平滚动 .

th {
white-space: nowrap;

}

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

有任何想法吗？
enter image description here

static

2 回答

  • 2

    将 white-space: nowrap; 应用于 <th> 元素 .

    这是一个例子：https://jsfiddle.net/b1e0x672/2/带有一些填充，只是为了让它保持良好的眼睛 . 您可能希望使CSS比我的更具体，这样就不会干扰其样式 .

    您可能还注意到我对td元素应用了垂直对齐 . 如果您将 vertical-align: top; 应用于 <td> 元素，那么它们将始终位于您的 Headers 下方而不是表格的中间位置 .

    回复于
  • 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>
    回复于

相关问题