html - 文本对齐 : right not working for th element

Question

为什么我不能右对齐 th 中的文本？

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: 甚至使用 !important !

th {text-align: right!important;}

Answer 1

你需要做 <th colspan="3">而不是 <th> .

---

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

您的表格有三列，如您的三个 <td> 所示元素。你的<th>只有一列宽，所以它将右对齐到该列。请看下面的演示:

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

<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>

---

如何修复:

如果你想要单<th>要跨越三列，您需要指定 colspan="3" .

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

<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>