避免表頭中多發線

我的html代碼：避免表頭中多發線

<table border="3"> 
<tr> 
    <th>a a a</td> 
    <th>bbb</td> 
    <th>ccc</td> 
</tr> 
<tr> 
    <td>a</td> 
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td> 
    <td>ccc</td> 
</tr> 
</table>

而且我得到什麼：

正如你看到的，a a a休息三行。

我不能使用aaa代替a a a（事實上，a a a在我的情況是運營商，這三個中國字符將打破爲a a a）。

您可以在http://jsfiddle.net/Kisnu/Lsubhd7q/進行調試。

來源

2015-10-22 Sayakiss

所有「a」都顯示在您的小提琴的一條線上。 – PapaHotelPapa

此外，您的HTML中存在錯誤。您已用''結束了''標記。 – PapaHotelPapa

@SkyBoydston它可能取決於您的顯示器的分辨率。我從我的'jsfiddle'中捕獲了這張照片。你可以在'bbb'列中添加更多'b'。 – Sayakiss

如果你不想讓你的頭打破，在所有你可以使用下面的CSS規則：

th { white-space: nowrap; }

來源

2015-10-22 01:16:58 Sam

您能否告訴我更多關於CSS爲什麼起作用的問題？ – Sayakiss

您正在告訴標題單元格中的內容不要換行。 – Sam

缺乏有效的虛擬數據使得表格在奇怪的維度中斷裂。

嘗試使用更多「有效」的虛擬數據。除非數據中的單詞長度不超過256個字符，否則不會使用「真實世界」數據。

嘗試使用lorum存有接到虛備份您的數據：

http://jsfiddle.net/Lsubhd7q/3/

<table border="3"> 
<tr> 
    <th>Sed ut perspiciatis accusantium doloremque</td> 
    <th>voluptatem accusantium doloremque</td> 
    <th>iste natus error sit voluptatem accusantium doloremque</td> 
</tr> 
<tr> 
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td> 
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td> 
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td> 
</tr> 
</table>

來源

2015-10-22 01:12:27 Lowkase

避免表頭中多發線

回答

相關問題