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 {width: 60px;}

或者你可以指定一个类，这样你就可以使它们更加狭窄：

th.narrow {width: 60px;}

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

只是旁注：不要忘记添加辅助功能的范围。如果数据低于标题单元格，请使用

<th scope="col">

并将th放在thead部分和td部分中的td单元格中。如果您的标题单元格位于表格的左侧，并且与这些标题相关的单元格位于右侧，则使用

<th scope="row">.

Answer 3

您可以尝试使用特定的宽度和高度样式在div中放置一个div来强制第二个单词。

Answer 4

您可以将word-spacing设置为足够大的尺寸。我个人可能只是让它不包装。

我希望能够找到专门用于强制破坏空白区域的CSS属性，但是没有（在粗略搜索时）。如果你的眼睛比我的好：http://w3.org/tr/css3-text/

如何使html表头跨越多行

4 个答案: