如何使HTML表格標題跨越多行

我有一些表頭，如：如何使HTML表格標題跨越多行

<table> 
    <tr> 
     <th> 
      Invoice Number 
     </th> 
     <th> 
      Invoice Date 
     </th> 

...

我希望得到不同的路線不同詞語的頭，所以我這樣做：

<table> 
    <tr> 
     <th> 
      Invoice<br />Number 
     </th> 
     <th> 
      Invoice<br />Date 
     </th> 

...

這有效，但我不確定它是否服從最佳實踐。我在網絡廣播中聽說你不應該再使用<br />了，不應該使用標籤來格式化你的輸出，但是應該使用css，這樣你就可以更容易地改變它。

任何人都可以提出一個更好的方法來做到這一點？

來源

2011-11-02 AnonyMouse

很確定使用'
'這絕對沒有錯。 – Eric

您可以嘗試在特定的寬度和高度風格的th內放置div來強制第二個單詞。

來源

2011-11-02 19:45:22 rogerlsmith

您可以設置寬度爲您所有的表頭與此：

th {width: 60px;}

，或者你可以指定一個類，所以你只要把其中的一些更窄：

th.narrow {width: 60px;}

你可以根據需要調整字體大小和寬度。

只是旁註：不要忘記添加可訪問性的範圍。如果數據是你的頭單元下方則使用

<th scope="col">

，並放入THEAD部分TH和TD細胞在TBODY部分。如果你的頭細胞是在表的左側，與這些報頭中的細胞是右邊，然後用

<th scope="row">.

來源

2011-11-02 21:13:06 PixelGraph

你可以把它作爲代碼：

<table> 
    <tr> 
     <th> 
      <div>Invoice</div><div>Number</div> 
     </th> 
     <th> 
      <div>Invoice</div><div>Date</div> 
     </th> 

...

儘管坦率地說，我看到使用<br />標籤沒有任何問題。

來源

2011-11-02 21:52:55 Eric

-1

您可以將word-spacing設置爲足夠大的尺寸。我個人可能會讓它不包裝。

我期待能夠找到一個CSS屬性專門用於強制打破空白，但沒有（在粗略搜索）。如果你的眼睛比我的眼睛好：http://w3.org/tr/css3-text/

來源

2011-11-02 23:14:44 reisio

如何使HTML表格標題跨越多行

回答

相關問題