如何使html表头跨越多行

Question

我有一些表头像:

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

...

我想在标题中的不同行上得到不同的单词,所以我这样做:

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

...

这有效,但我不确定它是否遵循最佳做法.我在网络广播中听说你不应该再使用它<br />了,不应该使用标签来格式化输出的样子,但是应该使用css,这样你就可以更容易地改变它.

任何人都可以提出更好的方法吗？

Answer 1

您可以将其编码为:

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

...

虽然坦率地说,我认为使用<br />标签没有错.

Answer 2

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