Permanently protected template

템플릿:Diagonal split header대각선 분할 헤더

Template:
템플릿 설명서[보기] [편집] [이력] [이력] [이력]

사용법

이 템플릿은 대각선으로 분할된 테이블 헤더 셀을 시뮬레이션하는데, 이 예에서처럼 행과 열의 헤더에 압축적으로 레이블을 붙이는 데 종종 사용된다.

에게
보낸 사람
 고체 액체 가스
고체 고체 변환 녹는 승화
액체 동결 — 비등/진화
가스 퇴적 응축 —

사용하려면 다음 명령어를 사용하여 헤더 셀을 만드십시오. ! 그 뒤를 이어 {{diagonal split header NATURE-OF-ROW-HEADERS NATURE-OF-COLUMN-HEADERS}}.

셀을 가로질러 대각선을 그리면 효과가 나타나기 때문에 두 헤더는 여전히 같은 셀의 일부분이며 쉽게 선을 오버런할 수 있다. 헤더를 깨지지 않는 공간으로 패딩하는 것이 해결책이다.&nbsp;(), 줄 바꿈()<br /> 및/또는 CSS(탈출) = 라고 표시하다. {{=}}(), 위 예와 같이. 템플릿 사용자는 일반적인 웹 브라우저에서 오버런되지 않는지 확인할 책임이 있다.

위키소스 렌더링 결과 
{class="wikable"! {{diangle split 헤더 From To}! solid!! 리퀴드 !! 가스 - ! 고체 고체 변환 용융 승화 = }
에게
보낸 사람
 고체 액체 가스
고체 고체 변환 녹는 승화=

배경색 및 비헤더 셀

세 번째 매개변수를 추가하여 표준 헤더 셀 색상에서 배경색을 변경할 수 있다. 변경 transparent (또는 다음과 같은 다른 색상) white또는 #ffffff)은 템플릿을 비파괴 셀에 적용할 수 있도록 한다. 접두사를 붙이십시오. 대신에 !, 이 친구 또는 Foe의 지불 행렬에서와 같이:

쌍2길2길
1쌍
 "친구"
(iii) 		"포"
(iii)
"친구"
(iii)
1
1
2
0
"포"
(iii)
0
2
0
0

열과 행, 접을 수 있고 정렬 가능한 테이블 스패닝

템플릿은 접을 수 있는 테이블 및 콜스팬 또는 행스팬을 사용하는 셀과 호환되며, 이 경우 콜스팬/행스팬 속성을 사이에 둔다. ! 그리고 {{diagonal split header ...}}. 정렬 화살표가 그려지지 않으므로 정렬 가능한 테이블과 호환되지 않지만, 이 문제는 두 번째 헤더 행을 사용하여 해결할 수 있다.

n
도시
 2020 hide2021
12월 얀 2월
로마 로마 8 1 6
베네치아 베네치아 3 5 7
피렌체 플로렌스 4 9 2

템플릿 데이터

테이블 헤더 셀 대각선 분할 시뮬레이션

템플릿 매개 변수

매개변수설명형식상태
행1

행 머리글(왼쪽 아래에 표시)

예
"Y축"
끈필수의
기둥2

오른쪽 상단에 표시된 열 머리글

예
{{컬러 #6cf X-축}}}
끈필수의
배경색3

배경색(선택 사항), 머리글이 아닌 표준 배경에는 투명(code) 사용

체납
#eaecf0
예
투명하다
끈선택적

기술 노트

  • Krautzberger당 라인 오버런이 없는 버전을 만들 수 있다. 이것은 선을 긋고 오른쪽 아래 모서리와 오른쪽 상단 모서리가 있는 2x2 CSS 그리드를 사용하여 작동한다.

    필요한 css-grid 기능에 대한 지원은 cniuse를 참조하십시오. 현재 구현의 기초가 되는 (미정착) css-gradients와 비교해 보십시오.

  • 브라우저가 삼각형 모양을 알지 못하기 때문에 두 구현 모두 대각선을 따라 텍스트를 배치하는 것을 지원하지 않는다. CSS 형상은 해결책이 될 수 있지만, 더 쉬운 형태 내부 접근법은 아직 표준화되지 않았다.
위의 문서는 템플릿에서 변환됨:대각선 분할 헤더/doc. (이력 편집)
편집자는 이 템플릿의 샌드박스(편집 diff)와 테스트케이스(편집) 페이지에서 실험할 수 있다.
/doc 하위 페이지에 카테고리를 추가하십시오. 이 템플릿의 하위 페이지.