如何使html表格标题跨越多行

我有一些表格标题，如：

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

...

发票号码
发票日期
...

我想在标题中的不同行中获得不同的单词，所以我这样做了：

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

...

发票编号
发票日期
...

这是可行的，但我不确定它是否符合最佳实践。我在一次网络广播中听说，你不应该再真正使用

，也不应该使用标签来格式化你的输出，而应该使用css，这样你就可以更容易地更改它

---

有人能提出更好的方法吗？

您可以尝试在th中放置一个具有特定宽度和高度样式的div，以强制第二个单词向下移动。

您可以使用以下方法设置所有表格标题的宽度：

th {width: 60px;}

或者，您可以指定一个类，使其中一些类更窄：

th.narrow {width: 60px;} 

您可以根据需要调整字体大小和宽度

只是一个旁注：别忘了为可访问性添加范围。如果数据位于标题单元格下方，则使用

<th scope="col"> 

将th放在THAD部分，td单元格放在tbody部分。如果标题单元格位于表的左侧，而与这些标题相关的单元格位于右侧，则使用

<th scope="row">. 

。

您可以将其编码为：

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

...

发票号码
发票日期
...

---

尽管坦率地说，我认为使用

标记没有什么错。

您可以将

字间距设置为足够大的大小。就我个人而言，我可能会让它不包起来

我本来希望能够找到一个CSS属性，专门用于强制在空白处中断，但没有找到（经过粗略搜索）。如果你的眼睛比我的好：
我很确定用

来做这件事绝对没有什么错。