问题:
I want to make this
Is it possible to only use HTML and CSS to achieve both problem(upward-orientation and square cell)?
the upward-orientation cell width should mat...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I want to make this
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 :
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 :
the width of the vertical header's cell does not wrap to vertical line height.
回答1:
@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:
回答2:
So here is one way to do it using CSS Grid layout:
set your layout using grid-template-areas
grid-template-rows and grid-template-columns will set your layout dimensions
set vertical text using:
writing-mode: tb-rl;
transform: rotate(-180deg);
See demo below:
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>
