text-align：th要素のために正しく機能していません

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： EVEN使用した重要！

th {text-align: right!important;} 

Answer 1

あなたは<th colspan="3">の代わり<th>行う必要があります。あなたの現在のコードと間違って何

---

：あなたの3つの<td>の要素によって示されるように

あなたのテーブルには、3つの列があります。 <th>は1列幅であるため、をその列に右揃えします。

それを修正する方法

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>は、3つの列にまたがっしたい場合は、必要に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>