对齐表格标题中的文本答案

【问题标题】：Align text in a table header对齐表格标题中的文本
【发布时间】：2012-12-09 03:34:57
【问题描述】：

align 似乎不适用于 th 元素。这是我的 HTML：

<div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

文本对齐对于td 元素工作得很好，但对于th 则失败。为什么？

【问题讨论】：

我认为它在 Firefox、IE 8 或 Chrome 中没有问题。确保您可能使用的任何 css 都不会超过您的标签属性。即使是内联样式属性也会比 HTML 属性具有更高的优先级。

标签： html html-table

【解决方案1】：

尝试在 style 属性中使用 text-align 来对齐中心。

<th class="not_mapped_style" style="text-align:center">DisplayName</th>

【讨论】：

【解决方案2】：

试试：

text-align: center;

您可能熟悉 HTML align 属性（自 HTML 5 起已停用）。 align 属性可以与

等标签一起使用

<table>, <td>, and <img>

指定这些元素的对齐方式。此属性允许您水平对齐元素。 HTML 还具有/具有用于垂直对齐元素的 valign 属性。这也已从 HTML5 中停止。

这些属性已停用，取而代之的是使用 CSS 来设置 HTML 元素的对齐方式。

实际上并没有 CSS align 或 CSS valign 属性。相反，CSS 具有适用于块级元素的内联内容的 text-align 和适用于内联级和表格单元格的 vertical-align 属性。

【讨论】：

text-align: center; 去哪儿了？在head 中的新<style type="text/css">？在现有的<div style="width: ...?或者别的地方？你可以更新你的答案。
@PeterMortensen <th style="text-align: center">Your awesome title</th>

【解决方案3】：

尝试使用样式

th {text-align:center}

【讨论】：

【解决方案4】：

您的代码可以工作，但它使用了不推荐使用的方法。您应该使用 CSS text-align 属性而不是 align 属性来执行此操作。即便如此，它必须是您的浏览器或其他影响它的东西。在Chrome 中试试这个演示（我必须禁用 normalize.css 才能让它渲染）。

来源：http://jsfiddle.net/EDSWL/
演示：http://jsfiddle.net/EDSWL/show

【讨论】：

【解决方案5】：

在HTML5 中，使<th>THcontent</th> 居中的最简单、最快的方法是添加一个colspan，如下所示：

<th colspan="3">Thcontent</th>

如果您的表格是三列，这将起作用。因此，如果您有一个四列表，请添加一个 colspan 为 4 等。

您可以在 CSS 文件中进一步管理位置，同时您已将 colspan 放在 HTML 中，就像我说的那样。

th { 
    text-align: center; /* Or right or left */
}

【讨论】：

【解决方案6】：

对我来说，以上都不起作用。我认为这是因为我在 1 级有两级标题和一个固定宽度。所以我无法在 2 级的相应列内对齐文本。

+---------------------------+
|           lvl 1           |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+

我不得不使用 width:auto 和 text:align-center 的组合：

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>

【讨论】：

我还需要 "width:auto;"在 Bootstrap 4 中为 colspan="3" 添加。很棒的提示。

【解决方案7】：

HTML：

<tr>
    <th>Language</th>
    <th>Skill Level</th>
    <th>&nbsp;</th>
</tr>

CSS：

tr, th {
    padding: 10px;
    text-align: center;
}

【讨论】：

【解决方案8】：

如果您想将所有表格的第 th 居中：
table th{ text-align: center; }

如果您只想将具有确定 id 的表格的 th 居中：
table#tableId th{ text-align: center; }

【讨论】：