왼쪽 상단의 대각선?

표 위의 타이틀과 왼쪽의 타이틀 각각에 대한 표제와 같은 것을 붙이고 싶은 것은 아무것도 없다고 생각합니다.

이런 느낌의.

( h tp // w w. 아 ぃゔぇ.・・ぉg/747/ 에서 캡처했습니다)

시도한 codepen

ht tp // 코데펜. 이오 / 에에다 마메 / 펜 / QjqPbG
이하, 한 내용입니다.

svg

대각선을 그리려는 셀에 svg를 넣어 해당 셀의 높이/폭 가득 선을 그리도록 조정합니다.
대각선은 배경 심상으로, position: absolute;에 들어간다.

preserveAspectRatio

preserveAspectRatio = "none"으로 영역을 채우는 것처럼 느껴지기 때문에 세로/가로로 변형해도 잘 조정해주는 것 같습니다.
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / SVG / 아 t 리부테 / p 레세 r ゔ 아 s pct

svg 태그 viewBox, path

viewBox는 viewport와 같은 것. path의 d는 선을 그리는 좌표이므로 여기는 맞춥니다.
샘플에서 viewBox는 "0 0 100 100"이고 path 태그 d는 "M0,0 l100,100"입니다.
100 곳은 10000 라든지로 정렬해도 대각선은 문제없이 그릴 수 있습니다.
단지, 현실의 px 사이즈와 너무 다르면, 1px의 라인의 가리키는 것으로 지정했다stroke-width="1” 가 너무 가늘어지거나 굵어지기 때문에 주의.
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / 두 cs / ue b / SVG / 아 t 리부테 / ぃ えw

그 외, table cell내에서, 높이가 100%가 되도록 조정

이 근처
h tp : // 굉장했다. 작은 m / 토마토 360 / MS / 28 일 94 A C42 그림 5445 그림 2d0 A

빠진 곳

IE에 표시되지 않음 / 높이가 부족함

height를 명시해 주거나 별도 셀에 컨텐츠가 들어 있지 않으면 경사선이 표시되지 않았다.
height를 명시하면 반응형적인 대응이 되지 않으므로,   를 넣어 1문자분의 높이를 확보하면 그 높이의 분은 표시된다.

샘플과 같이, 대각선이 들어가는 셀의 높이가, 열중에서 제일 높은 경우는 특히 문제 없지만, 그렇지 않은 경우는, padding등으로 미세 조정할 필요가 있을지도...

기타

실제로는 웹 앱 내에서의 구현으로 어느 정도 이용자가 특정할 수 있었기 때문에
뭐 이 정도로 좋을까라는 느낌이었습니다만,
이렇게 하면 시멘틱스적으로 좋다든가 있으면 가르쳐 주셨으면 합니다.