HTML表格與空白nowrap

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> 

上面會將第二和第三列設置爲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>