htmlのテーブルで対角線を引く

htmlで総当たりリーグ戦のテーブルを作成しています。以下は、現在のレイアウトです。

以下に、htmlとcssの全コードを示します。

html
1<div class="header">
2  <h1 class="title">
3    第7回しゅが研 リーグ表
4  </h1>
5</div>
6
7<div class="main">
8  <div class="league-table">
9    <table border="2" bordercolor="black" style="border-collapse: collapse">
10      <tr class="top-tr">
11        <th class="rank-title">順位</th>
12        <th class="member-title">メンバー</th>
13        <td class="opponent-name"></td>
14        <td class="opponent-name"></td>
15        <td class="opponent-name"></td>
16        <td class="opponent-name"></td>
17        <td class="opponent-name"></td>
18        <td class="opponent-name"></td>
19        <td class="opponent-name"></td>
20        <td class="opponent-name"></td>
21        <td class="opponent-name"></td>
22        <td class="opponent-name"></td>
23        <th class="win-count-title">勝</th>
24        <th class="lose-count-title">負</th>
25        <th class="sb-count-title">SB</th>
26      </tr>
27      <tr class="result-cells">
28        <td class="rank"></td>
29        <td class="self-name"></td>
30        <td></td>
31        <td></td>
32        <td></td>
33        <td></td>
34        <td></td>
35        <td></td>
36        <td></td>
37        <td></td>
38        <td></td>
39        <td></td>
40        <td class="win-count"></td>
41        <td class="lose-count"></td>
42        <td class="sb-count"></td>
43      </tr>
44      <tr class="result-cells">
45        <td class="rank"></td>
46        <td class="self-name"></td>
47        <td></td>
48        <td></td>
49        <td></td>
50        <td></td>
51        <td></td>
52        <td></td>
53        <td></td>
54        <td></td>
55        <td></td>
56        <td></td>
57        <td class="win-count"></td>
58        <td class="lose-count"></td>
59        <td class="sb-count"></td>
60      </tr>
61      <tr class="result-cells">
62        <td class="rank"></td>
63        <td class="self-name"></td>
64        <td></td>
65        <td></td>
66        <td></td>
67        <td></td>
68        <td></td>
69        <td></td>
70        <td></td>
71        <td></td>
72        <td></td>
73        <td></td>
74        <td class="win-count"></td>
75        <td class="lose-count"></td>
76        <td class="sb-count"></td>
77      </tr>
78      <tr class="result-cells">
79        <td class="rank"></td>
80        <td class="self-name"></td>
81        <td></td>
82        <td></td>
83        <td></td>
84        <td></td>
85        <td></td>
86        <td></td>
87        <td></td>
88        <td></td>
89        <td></td>
90        <td></td>
91        <td class="win-count"></td>
92        <td class="lose-count"></td>
93        <td class="sb-count"></td>
94      </tr>
95      <tr class="result-cells">
96        <td class="rank"></td>
97        <td class="self-name"></td>
98        <td></td>
99        <td></td>
100        <td></td>
101        <td></td>
102        <td></td>
103        <td></td>
104        <td></td>
105        <td></td>
106        <td></td>
107        <td></td>
108        <td class="win-count"></td>
109        <td class="lose-count"></td>
110        <td class="sb-count"></td>
111      </tr>
112      <tr class="result-cells">
113        <td class="rank"></td>
114        <td class="self-name"></td>
115        <td></td>
116        <td></td>
117        <td></td>
118        <td></td>
119        <td></td>
120        <td></td>
121        <td></td>
122        <td></td>
123        <td></td>
124        <td></td>
125        <td class="win-count"></td>
126        <td class="lose-count"></td>
127        <td class="sb-count"></td>
128      </tr>
129      <tr class="result-cells">
130        <td class="rank"></td>
131        <td class="self-name"></td>
132        <td></td>
133        <td></td>
134        <td></td>
135        <td></td>
136        <td></td>
137        <td></td>
138        <td></td>
139        <td></td>
140        <td></td>
141        <td></td>
142        <td class="win-count"></td>
143        <td class="lose-count"></td>
144        <td class="sb-count"></td>
145      </tr>
146      <tr class="result-cells">
147        <td class="rank"></td>
148        <td class="self-name"></td>
149        <td></td>
150        <td></td>
151        <td></td>
152        <td></td>
153        <td></td>
154        <td></td>
155        <td></td>
156        <td></td>
157        <td></td>
158        <td></td>
159        <td class="win-count"></td>
160        <td class="lose-count"></td>
161        <td class="sb-count"></td>
162      </tr>
163      <tr class="result-cells">
164        <td class="rank"></td>
165        <td class="self-name"></td>
166        <td></td>
167        <td></td>
168        <td></td>
169        <td></td>
170        <td></td>
171        <td></td>
172        <td></td>
173        <td></td>
174        <td></td>
175        <td></td>
176        <td class="win-count"></td>
177        <td class="lose-count"></td>
178        <td class="sb-count"></td>
179      </tr>
180      <tr class="result-cells">
181        <td class="rank"></td>
182        <td class="self-name"></td>
183        <td></td>
184        <td></td>
185        <td></td>
186        <td></td>
187        <td></td>
188        <td></td>
189        <td></td>
190        <td></td>
191        <td></td>
192        <td></td>
193        <td class="win-count"></td>
194        <td class="lose-count"></td>
195        <td class="sb-count"></td>
196      </tr>
197    </table>
198  </div>
199
200  <div class="member-list">
201    <h2 class="member-list-title">
202      メンバー紹介
203    </h2>
204    <table border="2" bordercolor="black" style="border-collapse: collapse">
205      <tr class="member-info">
206        <th class="member">メンバー</th>
207        <th class="account">アカウント</th>
208        <th class="achievement">実績</th>
209      </tr>
210      <tr class="member-introduction">
211        <td></td>
212        <td></td>
213        <td></td>
214      </tr>
215      <tr class="member-introduction">
216        <td></td>
217        <td></td>
218        <td></td>
219      </tr>
220      <tr class="member-introduction">
221        <td></td>
222        <td></td>
223        <td></td>
224      </tr>
225      <tr class="member-introduction">
226        <td></td>
227        <td></td>
228        <td></td>
229      </tr>
230      <tr class="member-introduction">
231        <td></td>
232        <td></td>
233        <td></td>
234      </tr>
235      <tr class="member-introduction">
236        <td></td>
237        <td></td>
238        <td></td>
239      </tr>
240      <tr class="member-introduction">
241        <td></td>
242        <td></td>
243        <td></td>
244      </tr>
245      <tr class="member-introduction">
246        <td></td>
247        <td></td>
248        <td></td>
249      </tr>
250      <tr class="member-introduction">
251        <td></td>
252        <td></td>
253        <td></td>
254      </tr>
255      <tr class="member-introduction">
256        <td></td>
257        <td></td>
258        <td></td>
259      </tr>
260    </table>
261    </div>
262  </div>
263</div>

css
1.header {
2  margin: 20px;
3}
4
5.main {
6  margin: 20px;
7}
8
9.league-table {
10
11}
12
13table {
14  
15}
16
17.top-tr {
18  height: 30px;
19}
20
21.rank-title {
22  width: 50px;
23  text-align: center;
24  background-color: #FFFFAA;
25}
26
27.member-title {
28  width: 80px;
29  text-align: center;
30  background-color: #EEEEEE;
31}
32
33.self-name {
34  height:40px ;
35  background-color: #EEEEEE;
36}
37
38.opponent-name {
39  width: 60px;
40  background-color: #EEEEEE;
41}
42
43.win-count-title {
44  width: 50px;
45  text-align: center;
46  background-color: #FFD5EC;
47}
48
49.lose-count-title {
50  width: 50px;
51  text-align: center;
52  background-color: #D9E5FF;
53}
54
55.sb-count-title {
56  width: 50px;
57  text-align: center;
58  background-color: #F3FFD8;
59}
60
61.win-count {
62
63}
64
65.lose-count {
66
67}
68
69.result-cells {
70  height:40px ;
71}
72
73.member-list {
74  margin-top: 30px;
75}
76
77.member-list-title {
78  margin-bottom: 10px;
79}
80
81.member-info {
82  height: 30px;
83}
84
85.member {
86  width: 100px;
87  text-align: center;
88  background-color: #EEEEEE;
89}
90
91.account {
92  width: 150px;
93  text-align: center;
94}
95
96.achievement {
97  width: 500px;
98  text-align: center;
99}
100
101.member-introduction {
102  height: 30px;
103}

自分vs自分のところに斜線を引きたいのですが、tdごと斜線を引くと手間がかかります。
そこで、テーブルの特定箇所に対角線を引く方法を調べました。

調べた内容

・CSSで斜線を引く方法:表の空セルなど任意のHTML要素に
https://allabout.co.jp/gm/gc/457196/3/

CSSで斜線を引く方法を現役デザイナーが解説【初心者向け】
・https://techacademy.jp/magazine/25188

試したコード

テーブルに斜線を引くには、以下のコードが使えると考えました。

css
1background: linear-gradient(45deg, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);

しかし、期待しない場所に太すぎる線が出ました。

%の値を変えたりしましたが、色のグラデーションが出て期待通りの対角線は実現しませんでした。

対角線の起点と終点を指定したい

対角線の起点と終点の位置、色や太さを指定するには、どうすればよいでしょうか？

m.ts10806

2020/09/24 11:59

画像はteratailの画像投稿機能を利用してください。また、自身が調べたこと試したこと（そのコード）をご提示ください。

hatena19

2020/09/24 12:58 編集

提示されているコードはHTMLではなくCSSのコードの一部ですね。現状のHTMLコードとCSSコードの全体を提示してください。状況が回答者に再現できるコードを提示してほしいということです。あと、画像の表はセルがすべて空欄になってますが、実際に表示する表もそのようにすべて空欄なんですか。

Zengo_Master

2020/09/24 13:08

確かに、提示したコードはCSSの一部でした。他も情報不足で申し訳ございません。HTMLとCSSの全体を示します。また、現状では全て空欄になっております。

行動規範の内容に同意します

回答2件

現状のCSSに下記を追加すればどうでしょうか。

css
1tr.result-cells:nth-child(2) > td:nth-child(3),
2tr.result-cells:nth-child(3) > td:nth-child(4),
3tr.result-cells:nth-child(4) > td:nth-child(5),
4tr.result-cells:nth-child(5) > td:nth-child(6),
5tr.result-cells:nth-child(6) > td:nth-child(7),
6tr.result-cells:nth-child(7) > td:nth-child(8),
7tr.result-cells:nth-child(8) > td:nth-child(9),
8tr.result-cells:nth-child(9) > td:nth-child(10),
9tr.result-cells:nth-child(10) > td:nth-child(11),
10tr.result-cells:nth-child(11) > td:nth-child(12){
11  background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
12}

投稿2020/09/24 13:34

hatena19

総合スコア33759

Zengo_Master

2020/09/24 13:38

ありがとうございます。期待通りの対角線が表示されました。

行動規範の内容に同意します

ベストアンサー

svgを使えば簡単にできますよ。

index.html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css.css">
6</head>
7<body>
8  <table>
9    <tr>
10      <th class="diagonal">
11        <img src="diagonal.svg">
12      </th>
13      <th>1</th>
14      <th>2</th>
15      <th>3</th>
16      <th>4</th>
17      <th>5</th>
18    </tr>
19    <tr>
20      <th>1</th>
21      <td class="diagonal">
22        <img src="diagonal.svg">
23      </td>
24      <td></td>
25      <td></td>
26      <td></td>
27      <td></td>
28    </tr>
29    <tr>
30      <th>2</th>
31      <td></td>
32      <td class="diagonal">
33        <img src="diagonal.svg">
34      </td>
35      <td></td>
36      <td></td>
37      <td></td>
38    </tr>
39    <tr>
40      <th>3</th>
41      <td></td>
42      <td></td>
43      <td class="diagonal">
44        <img src="diagonal.svg">
45      </td>
46      <td></td>
47      <td></td>
48    </tr>
49    <tr>
50      <th>4</th>
51      <td></td>
52      <td></td>
53      <td></td>
54      <td class="diagonal">
55        <img src="diagonal.svg">
56      </td>
57      <td></td>
58    </tr>
59    <tr>
60      <th>5</th>
61      <td></td>
62      <td></td>
63      <td></td>
64      <td></td>
65      <td class="diagonal">
66        <img src="diagonal.svg">
67      </td>
68    </tr>
69  </table>
70</body>
71</html>

css.css
1table{
2  border-collapse:collapse;
3}
4table th,
5table td{
6  border:1px solid #ccc;
7  width:40px;
8  height:40px;
9  text-align:center;
10  vertical-align:middle;
11  padding:0;
12}
13
14.diagonal{
15  background-color:#eee;
16}
17.diagonal img{
18  display:block;
19  width:100%;
20  height:100%;
21}

diagnal.svg
1<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
2  <path d="M 0 0 L 0 0 L 40 40 z" fill="" stroke="#ccc" stroke-width="1" />
3</svg>

こんな感じでどうですか？