text-align：右边没有为元素工作

Question

为什么我不能正确对齐文本？

https://jsfiddle.net/btzatLb7/1/

HTML：

  <table>
    <tr>
      <th>Averages:</th>
    <tr>
    <tr class="average_labels">
      <td id="minute_label">1 min</td>
      <td id="minute_label">5 min</td>
      <td id="minute_label">15 min</td>
    </tr>
    <tr class="average_data">
      <td id="one_minute">2.30</td>
      <td id="five_minute">2.24</td>
      <td id="fifteen_minute">2.01</td>
    </tr>
  </table>

CSS： 即使使用！重要！

th {text-align: right!important;}

Answer 1

您需要<th colspan="3">代替<th>。

您当前的代码有什么问题：

您的表格有三列，由三个<td>元素表示。您的<th>只有一列宽，因此它会将与该列正确对齐。看看下面的演示：

＆＃13;

＆＃13;

th {text-align: right;}
 
th, td {border: 1px solid black;}

＆＃13;

<table>
  <tr>
    <th>Averages:</th>
    <tr>
      <tr class="average_labels">
        <td id="minute_label">1 min</td>
        <td id="minute_label">5 min</td>
        <td id="minute_label">15 min</td>
      </tr>
      <tr class="average_data">
        <td id="one_minute">2.30</td>
        <td id="five_minute">2.24</td>
        <td id="fifteen_minute">2.01</td>
      </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如何修复：

如果您希望单个<th>跨越三列，则需要指定colspan="3"。

＆＃13;

＆＃13;

th {text-align: right;}
 
th, td {border: 1px solid black;}

＆＃13;

<table>
  <tr>
    <th colspan="3">Averages:</th>
    <tr>
      <tr class="average_labels">
        <td id="minute_label">1 min</td>
        <td id="minute_label">5 min</td>
        <td id="minute_label">15 min</td>
      </tr>
      <tr class="average_data">
        <td id="one_minute">2.30</td>
        <td id="five_minute">2.24</td>
        <td id="fifteen_minute">2.01</td>
      </tr>
</table>

＆＃13;

＆＃13;

＆＃13;