テーブルヘッダーの横にCSSの矢印が表示されるようにするにはどうすればよいですか？

Question

CSSを使用してテーブルのヘッダー内のセルの横に小さな上下矢印を表示しようとしていますが、矢印がヘッダーの上に表示されていて、20ピクセルよりもはるかに大きいようですベースにいてください。

.headerRow { 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
} 
 

 
.arrow-up { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid black; 
 
} 
 

 
.arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #f00; 
 
}

<table id="searchResults"> 
 
    <thead> 
 
    <tr class="headerRow"> 
 
     <th class="headerRaceName arrow-down" data-order="name">Event</th> 
 
     <th class="headerYear" data-order="day">Yr</th> 
 
     <th class="headerDate" data-order="day">Date</th> 
 
     <th class="headerDistance">Distance</th> 
 
     <th class="headerLocation" data-order="location">Location</th> 
 
    </tr> 
 
    </thead> 
 
</table>

私は私のテーブルヘッダの右側にきちんと表示される矢印を得るために何をしないのですか？

Answer 1

編集：矢印を右側に移動しました。

よく20pxは矢印のサイズの半分です。矢印を20px幅にしたい場合は、10pxにする必要があります。 thの内部にテキストが必要な場合は、th自体を変更する代わりに、擬似要素を使用する必要があります。デモを参照してください：

.arrow-down:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid #f00; 
 
}

<table id="searchResults"> 
 
    <thead> 
 
    <tr class="headerRow"> 
 
     <th class="headerRaceName arrow-down" data-order="name">Event </th> 
 
    </tr> 
 
    </thead> 
 
</table>

CSSの矢印トリックを理解するための良い方法は、各境界線に異なる色を与えることです。

.arrow-down:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid yellow; 
 
    border-right: 10px solid blue; 
 
    border-top: 10px solid red; 
 
    border-bottom: 10px solid green; 
 
}

<table id="searchResults"> 
 
    <thead> 
 
    <tr class="headerRow"> 
 
     <th class="headerRaceName arrow-down" data-order="name">Event </th> 
 
    </tr> 
 
    </thead> 
 
</table>

：私はあなたが結果を見るように境界線の幅は20ピクセル幅の矢印を取得するために10pxのでなければならない理由を簡単に理解できるとすぐに確信しています