Q&A
https://qiita.com/makikooo/questions/1a42ffa66df885a9471e
以下ご対応ください。
https://teratail.com/help#posted-otherservice
実現したいこと
表の左上隅に斜線と文字を入れたい
画像の赤い四角のようにしたい
よろしくお願い致します。
前提
表を作ったが写真のようになる
該当のソースコード
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〜６人</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を二つにしたがこのようになる
回答1件
0
ベストアンサー
CSS
1<style> 2.teinen_table { 3 border-collapse:collapse; 4} 5.teinen_table th, 6.teinen_table td{ 7 border:1px solid black; 8} 9.teinen_table tr:first-child th:first-child div { 10 background-image: linear-gradient( 11 to right top, transparent calc(50% - 0.5px), black 50%, black calc(50% + 0.5px), transparent calc(50% + 1px) 12 ); 13 display: grid; 14 width: max-content; 15 justify-content: space-between; 16 grid-template-columns: repeat(2, 1fr); 17 grid-auto-rows: 1fr; 18} 19.col-header { 20 21 grid-column-start: 2; 22 23 text-align: right; 24 25} 26 27.row-header { 28 29 grid-column-start: 1; 30 31} 32</style> 33<table class="teinen_table"> 34<tr> 35 <th rowspan="2"><div><span class="col-header">措置内容</span><span class="row-header">60歳以上<br>被保険者数</span></div></th> 36 <th rowspan="2">65歳</th> 37 <th colspan="2">66?69歳</th> 38 <th rowspan="2">70歳以上</th> 39 <th rowspan="2">定年の定めの廃止</th> 40</tr> 41<tr> 42 <th>＜5歳未満の引上げ＞</th> 43 <th>＜5歳以上の引上げ＞</th> 44</tr> 45<tr> 46 <td>1?3人</td> 47 <td>15万円</td> 48 <td>20万円</td> 49 <td>30万円</td> 50 <td>30万円</td> 51 <td>40万円</td> 52</tr> 53<tr> 54 <td>4?６人</td> 55 <td>20万円</td> 56 <td>25万円</td> 57 <td>50万円</td> 58 <td>50万円</td> 59 <td>80万円</td> 60</tr> 61<tr> 62 <td>7?9人</td> 63 <td>25万円</td> 64 <td>30万円</td> 65 <td>85万円</td> 66 <td>85万円</td> 67 <td>120万円</td> 68</tr> 69<tr> 70 <td>10人以上</td> 71 <td>30万円</td> 72 <td>35万円</td> 73 <td>105万円</td> 74 <td>105万円</td> 75 <td>160万円</td> 76</tr>
投稿2023/07/31 08:44
総合スコア117734
あなたの回答
tips
プレビュー
