如何使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表格标题跨越多行

回答

相关问题