我有一些表头像：
<table>
<tr>
<th>
Invoice Number
</th>
<th>
Invoice Date
</th>
...
我想在标题中的不同行上获取不同的单词，所以我这样做：
<table>
<tr>
<th>
Invoice<br />Number
</th>
<th>
Invoice<br />Date
</th>
...
这有效，但我不确定它是否遵循最佳做法。我在网络直播中听说你不应该使用它 <br /> 再也不应该使用标签格式化输出的样子，但是应该使用css，这样你就可以更容易地改变它。
谁能建议一个更好的方法来做到这一点？
您可以将其编码为：
<table>
<tr>
<th>
<div>Invoice</div><div>Number</div>
</th>
<th>
<div>Invoice</div><div>Date</div>
</th>
...
虽然坦率地说，我认为使用它没有任何问题 <br /> 标签。
您可以使用以下方法设置所有表头的宽度：
th {width: 60px;}
或者你可以指定一个类，这样你就可以让它们变得更窄一些：
th.narrow {width: 60px;}
您可以根据需要调整字体大小和宽度。
只是旁注：不要忘记添加可访问性的范围。如果数据低于标题单元格，则使用
<th scope="col">
并将th放在thead部分和td部分中的td单元格中。如果您的标题单元格位于表格的左侧，并且与这些标题相关的单元格位于右侧，则使用
<th scope="row">.
您可以尝试使用特定的宽度和高度样式在div中放置div以强制第二个单词向下。
你可以设置 word-spacing 足够大的尺寸。就个人而言，我可能只是让它不包装。
我期待能够找到一个专门用于强制破坏空白区域的CSS属性，但没有（在一个 走马 搜索）。如果你的眼睛比我的好： http://w3.org/tr/css3-text/