CODEWITHSUNDEEP
htmlcss
JacobIRR
JacobIRR

Reputation: 8946

text-align: right not working for th element

Why I can't I right align the text in the 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: EVEN USING !important !

th {text-align: right!important;}

Upvotes: 0

Views: 3735

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

You need to do <th colspan="3"> instead of <th>.

What's wrong with your current code:

Your table has three columns, as indicated by your three <td> elements. Your <th> is only one column wide, so it will right-align to that column. Take a look at this demonstration below:

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>

How to fix it:

If you want the single <th> to span across three columns, you need to specify 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>

Upvotes: 3

Related Questions