Search code examples
htmlcsscss-tables

Table with fixed cell and upward-orientation header

I want to make this

enter image description here

Is it possible to only use HTML and CSS to achieve both problem(upward-orientation and square cell)?

the upward-orientation cell width should match the line-height

if I have to use javascript, can it be done without using any framework?

Thank You

EDIT 1:

This is what I currently done

<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>

which turn into this :

enter image description here

and then I change the structure of table header and make the .vertical class like this :

<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>

and managed to achieve like this :

enter image description here

the width of the vertical header's cell does not wrap to vertical line height.

Solution

  • @kukkuz answer is probably better, but if you want to do it with an actual table, I guess you can use writing-mode and transform CSS options.
    So it can be done like this:

    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>

    Reference: