表の左上隅に斜線と文字を入れたい

実現したいこと

表の左上隅に斜線と文字を入れたい
画像の赤い四角のようにしたい
イメージ説明

よろしくお願い致します。

前提

表を作ったが写真のようになる
イメージ説明

該当のソースコード

HTML

1<table class="teinen_table"> 2 <tr> 3 <th rowspan="2"><span class="col-header">60歳以上<br>被保険者数</span><span class="row-header">措置内容</span></th> 4 <th rowspan="2">65歳</th> 5 <th colspan="2">66〜69歳</th> 6 <th rowspan="2">70歳以上</th> 7 <th rowspan="2">定年の定めの廃止</th> 8 </tr> 9 <tr> 10 <th></th> 11 <th><5歳未満の引上げ></th> 12 <th><5歳以上の引上げ></th> 13 </tr> 14 <tr> 15 <td>1〜3人</td> 16 <td>15万円</td> 17 <td>20万円</td> 18 <td>30万円</td> 19 <td>30万円</td> 20 <td>40万円</td> 21 </tr> 22 <tr> 23 <td>4〜6人</td> 24 <td>20万円</td> 25 <td>25万円</td> 26 <td>50万円</td> 27 <td>50万円</td> 28 <td>80万円</td> 29 </tr> 30 <tr> 31 <td>7〜9人</td> 32 <td>25万円</td> 33 <td>30万円</td> 34 <td>85万円</td> 35 <td>85万円</td> 36 <td>120万円</td> 37 </tr> 38 <tr> 39 <td>10人以上</td> 40 <td>30万円</td> 41 <td>35万円</td> 42 <td>105万円</td> 43 <td>105万円</td> 44 <td>160万円</td> 45 </tr> 46 </table> 47 <p class="sec03_text"> 48 【希望者全員を対象とする66歳以上の継続雇用制度の導入】 49 </p> 50 <table class="over66_table"> 51 <tr> 52 <th><span class="col-header">60歳以上<br>被保険者数</span><span class="row-header">措置内容</span></th> 53 <th>66〜69歳</th> 54 <th>70歳以上</th> 55 </tr> 56 <tr> 57 <td>1〜3人</td> 58 <td>15万円</td> 59 <td>30万円</td> 60 </tr> 61 <tr> 62 <td>4〜6人</td> 63 <td>25万円</td> 64 <td>50万円</td> 65 </tr> 66 <tr> 67 <td>7〜9人</td> 68 <td>40万円</td> 69 <td>80万円</td> 70 </tr> 71 <tr> 72 <td>10人以上</td> 73 <td>60万円</td> 74 <td>100万円</td> 75 </tr> 76 </table>

CSS

1.teinen_table tr:first-child th:first-child {2 background-image: linear-gradient(3 to right top, transparent calc(50% - 0.5px), #eaeaea 50%, #eaeaea calc(50% + 0.5px), transparent calc(50% + 1px)4 );5 display: grid;6 width: max-content;7 justify-content: space-between;8 grid-template-columns: repeat(2, 1fr);9 grid-auto-rows: 1fr;10}11.col-header {12 grid-column-start: 2;13 text-align: right;14}15.row-header {16 grid-column-start: 1;17}

試したこと

二つ目のtrのthを二つにしたがこのようになる
イメージ説明

コメントを投稿

0 コメント