Таблица с фиксированной ячейкой и заголовком, ориентированным вверх - PullRequest
Новая
       35

Таблица с фиксированной ячейкой и заголовком, ориентированным вверх

2 голосов
/ 28 марта 2019

Я хочу сделать это

enter image description here

Можно ли использовать только HTML и CSS для решения обеих задач (ориентация вверх и квадратная ячейка)?

ширина ячейки с ориентацией вверх должна соответствовать высоте строки

если мне нужно использовать javascript, можно ли это сделать без использования какой-либо инфраструктуры?

Спасибо

РЕДАКТИРОВАТЬ 1:

Это то, что я сейчас сделал 

<style>
    table {
        border-collapse: collapse;
    }

        table td {
            border: 1px solid #555;
            width: 150px;
            height: 150px;
        }

    .vertical {
        transform: rotateZ(-90deg);
        -o-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
        -moz-transform: rotateZ(-90deg);
        -webkit-transform: rotateZ(-90deg);
    }
</style>
<table>
    <tr>
        <td rowspan="2" colspan="2"></td>
        <td colspan="2">Horizontal Header</td>
    </tr>
    <tr>
        <td>Horizontal Sub-Header</td>
        <td>Horizontal Sub-Header</td>
    </tr>
    <tr>
        <td rowspan="2" class="vertical">Vertical Header</td>
        <td class="vertical">Vertical Sub-Header</td>
        <td>[0][0]</td>
        <td>[0][1]</td>
    </tr>
    <tr>
        <td class="vertical">Vertical Sub-Header</td>
        <td>[1][0]</td>
        <td>[1][1]</td>
    </tr>
</table>

, которые превращаются в это:

enter image description here

, а затем я изменяю структуру заголовка таблицы и делаю класс .vertical следующим образом: 

<style>
    . . .
    .vertical {
        display: inline-block;
        . . .
    }
</style>
<table>
    . . .
        <td rowspan="2"><span class="vertical">Vertical Header</span></td>
        <td><span class="vertical">Vertical Sub-Header</span></td>
    . . .
</table>

и смог достичь так:

enter image description here

width ячейки вертикального заголовка не переносится на высоту вертикальной линии.

Ответы [ 2 ]

2 голосов
/ 28 марта 2019

@ kukkuz ответ, вероятно, лучше, но если вы хотите сделать это с реальной таблицей, я думаю, вы можете использовать writing-mode и transform опции CSS.
Так что это можно сделать так: 

th,
td {
  border: 1px solid black;
}

td {
  width: 150px;
  height: 150px;
}

.vertical-header span,
.vertical-header {
  white-space: nowrap;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.vertical-header span {
  transform: rotate(0.5turn);
}
<html>

  <body>
    <table>
      <tr>
        <th></th>
        <th></th>
        <th colspan="2">h-header</th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th>sub-h-header1</th>
        <th>sub-h-header2</th>
      </tr>
      <tr>
        <th rowspan="2" class="vertical-header"><span>v-header</span></th>
        <th class="vertical-header"><span>sub-v-header1</span></th>
        <td>0,0</td>
        <td>0,1</td>
      </tr>
      <tr>
        <th class="vertical-header"><span>sub-v-header2</span></th>
        <td>1,0</td>
        <td>1,1</td>
      </tr>
    </table>
  </body>

</html>

Ссылка:

2 голосов
/ 28 марта 2019

Итак, вот один из способов сделать это с помощью CSS Grid layout:

  • установить макет используя grid-template-areas

  • grid-template-rows и grid-template-columns установят размеры макета

  • установить вертикальный текст, используя: 

    writing-mode: tb-rl;
transform: rotate(-180deg);

См. Демо ниже: 

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: inline-grid;
  grid-template-areas: '. . heading heading' 
                       '. . sub-heading1 sub-heading2' 
                       'heading-v sub-heading1-v s1 s2' 
                       'heading-v sub-heading2-v s3 s4';
  grid-template-rows: auto auto 150px 150px;
  grid-template-columns: auto auto 150px 150px;
  grid-gap: 1px;
  background: cadetblue;
  border: 1px solid cadetblue;
}

.wrapper>div {
  background: #fff;
}

.vertical {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  min-height: 0;
  height: 100%;
}

.heading {
  grid-area: heading;
}

.sub-heading1 {
  grid-area: sub-heading1;
}

.sub-heading2 {
  grid-area: sub-heading2;
}

.heading-v {
  grid-area: heading-v;
}

.sub-heading1-v {
  grid-area: sub-heading1-v;
}

.sub-heading2-v {
  grid-area: sub-heading2-v;
}

.s1 {
  grid-area: s1;
}

.s2 {
  grid-area: s2;
}

.s3 {
  grid-area: s3;
}

.s4 {
  grid-area: s4;
}
<div class='wrapper'>
  <div class="heading">Horizontal header</div>
  <div class="sub-heading1">Horizontal sub-header</div>
  <div class="sub-heading2">Horizontal sub-header</div>
  <div class="heading-v vertical">Vertical header</div>
  <div class="sub-heading1-v vertical">Vertical sub-header</div>
  <div class="sub-heading2-v vertical">Vertical sub-header</div>
  <div class="s1"></div>
  <div class="s2"></div>
  <div class="s3"></div>
  <div class="s4"></div>
</div>
...