1. 하고 싶은 일

통상의 테이블을 사용한 레이아웃(1행째가 헤더, 2행째 이후가 각 레코드)를 html의 구조는 그대로 종횡을 바꾸고 싶다.
flex를 사용한 예(「CSS에서만 테이블 행렬 교체 - Qiita」등)도 있지만 이 경우, 빈 컬럼이 있으면 레이아웃이 무너져 버리므로 다른 방법으로 실현을 해본다.

동작 확인을 한 환경은 다음과 같다. Mac이 없기 때문에 Mac 버전 safari에서는 어떻게 될지 알 수 없습니다.

Windos10 × Chrome 81.0.4044.92,IE11 (11.719.18362.0)

iOS 13.4 (iPad mini 4) × safari

▼교환 전의 이미지


▼교환 후의 이미지

2. 종횡 교체 전

우선은 통상의 테이블을 사용한 상태.
여기에서 HTML/CSS를 수정하고 바꿉니다. (면적의 값은 숫자, 기호의 거동을 확인하고 싶기 때문에 적당합니다)

HTML

<table>
    <thead>
        <tr><th>県名</th><th>県庁所在地</th><th>面積</th></tr>
    </thead>
    <tbody>
        <tr><td>埼玉</td><td>さいたま</td><td>-</td></tr>
        <tr><td>千葉</td><td>千葉</td><td>-</td></tr>
        <tr><td>神奈川</td><td>横浜</td><td>1</td></tr>
    </tbody>
</table>

CSS

table {
    border : 1px solid;
}
th {
    border : 1px solid;
    background-color : #FF9900;
}
td {
    border : 1px solid;
}

미리보기

3. 테이블 행렬 교체

테이블에 [-ms-writing-mode: tb-lr;writing-mode: vertical-lr;]를 설정합니다.

CSS

table {
    border : 1px solid;
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
}
th {
    border : 1px solid;
    background-color : #FF9900;
}
td {
    border : 1px solid;
}

미리보기

테이블의 행렬이 바뀌어 문자도 세로로 쓰여졌습니다.

4.문자를 가로쓰기(NG)

th,td 요소 안을 가로로 쓰고 싶기 때문에 [-ms-writing-mode: lr-tb;writing-mode: horizontal-tb;]를 설정하면…

CSS

table {
    border : 1px solid;
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
}
th {
    border : 1px solid;
    background-color : #FF9900;
    -ms-writing-mode : lr-tb;
    writing-mode : horizontal-tb;
}
td {
    border : 1px solid;
    -ms-writing-mode : lr-tb;
    writing-mode : horizontal-tb;
}

미리보기

chrome,safari는 변화 없음…. IE는 가로로 쓰였지만 요소의 폭이 이상하다. 인라인 요소와 같은 상태입니다. 「3.테이블의 행렬을 바꾼다」에 대해서 셀의 높이를 지정해 반드시 1문자마다 개행되도록 하는 손도 있지만, 반각 문자나 기호가 있으면 잘 기능하지 않게 되므로 다른 것 방법을 생각합니다.

4. 문자를 가로 쓰기

th,td 요소가 [display:table-cell] 상태를 유지하면 좋을 것 같다. 그래서 조금 강인하지만 th, td 요소에 설정한 문자열을 span 태그로 묶습니다. 그런 다음 span 요소가 가로로 작성되도록 CSS에 "-ms-writing-mode : lr-tb;writing-mode : horizontal-tb;"를 설정합니다.
crhome,IE는 이것으로 OK입니다만 safari는 셀의 높이가 없어져 테이블이 부서져 버렸습니다. 그 때문에 조금 강인합니다만 th,td 요소에 「line-height : 1; height : 1em;」, span 요소에 「white-space : nowrap;」를 설정합니다.
이 근처는 만들고 싶은 테이블에 따라 (내용이 정적 or 동적 etc) 조정하십시오.

HTML

<table>
    <thead>
        <tr><th><span>県名</th></span><th><span>県庁所在地</th></span><th><span><span>面積</th></span></tr>
    </thead>
    <tbody>
        <tr><td><span>埼玉</td></span><td><span>さいたま</td></span><td><span>－</td></span></tr>
        <tr><td><span>千葉</td></span><td><span>千葉</td></span><td><span>－</td></span></tr>
        <tr><td><span>神奈川</td></span><td><span>横浜</td></span><td><span>1</td></span></tr>
    </tbody>
</table>

CSS

table {
    border : 1px solid;
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
}
th {
    border : 1px solid;
    background-color : #FF9900;
    line-height : 1;
    height : 1em;
}
td {
    border : 1px solid;
    line-height : 1;
    height : 1em;
}
td>span,th>span{
    -ms-writing-mode : lr-tb;
    writing-mode : horizontal-tb;
    white-space : nowrap;
}

미리보기

폭이 조금 불편하지만 일단 완성.
나중에 필요에 따라 폭이나 마진, 패딩을 조정하는 곳입니까?