Question

嘿，我想知道你是否可以拥有一个HTML表，并且某些列有whitespace: nowrap，其他列有whitespace: normal？

示例：

<table>
    <thead>
        <tr>
            <th>No wrap</th>
            <th>Wrap</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Small text</td>
            <td>Wrap this longgggg text</td>
        </tr>
    </tbody>
</table>

Answer 1

默认情况下，

CSS white-space为normal，所以您只需要为某些列将其设置为nowrap。一种方法是向它们添加一个类，如：

<td class="my_nowrap">this won't wrap</td>
<style>
.my_nowrap {
     white-space: nowrap;
}
</style>

其他方式是使用CSS3 nth-child selector和（不设置类）定位某些列，如：

<style>
td:nth-child(2),
td:nth-child(3) {
.my_nowrap {
     white-space: nowrap;
}
</style>

以上将第2和第3列设为nowrap。

Answer 2

是的，这是可能的。看一下下面的例子。

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

tr.wrap {
    width: 50px;

}

th.wrap, td.wrap {
    background: red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 10px;
}

<table style="width:100%">
  <tr>
    <th class='wrap'>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td class='wrap'>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

带有whitespace nowrap的HTML表

2 个答案: