英文:
HTML Table rotated headers on TR/TD independent height
问题
I've created this table with a mix of horizontal and vertical headers but I'm not able to control the height of the col-span rows/cols in the middle independently so it's created a lot of unnecessary white-space. How can I control the height of the two sets of rows/cols independently as shown on the picture below.
英文:
I've created this table with a mix of horizontal and vertical headers but I'm not able to control the height of the col-span rows/cols in the middle independently so it's created a lot of un-necessary white-space. How can I control the height of the two sets of rows/cols independently as shown on the picture below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
th.rotate {
writing-mode: vertical-lr;
transform:rotate(-180deg)
}
<!-- language: lang-html -->
<table class="table" border="1">
<thead>
<tr>
<th class="rotate" rowspan="2">
First Rotated Header</th>
<th class="rotate" rowspan="2">
Second Rotated Header</th>
<th class="rotate" rowspan="2">
Third Rotated Header</th>
<th class="rotate" rowspan="2">
Fourth Rotated Header</th>
<th class="rotate" rowspan="2">
Fifth Rotated Header</th>
<th class="rotate" colspan="1">
Sisth Rotated Header</th>
<th class="rotate" colspan="1">
Seventh Rotated Header</th>
<th class="rotate" colspan="1">
Eigth Rotated Header</th>
<th class="rotate" colspan="1">
Ninth Rotated Header</th>
<th colspan="6">
Large Colspan Group Header</th>
<th class="thlarge" rowspan="2">
Additional Comments
</th>
</tr>
<tr>
<th colspan="1">
1</th>
<th colspan="1">
2</th>
<th colspan="1">
3</th>
<th colspan="1">
4</th>
<th class="rotate" colspan="1">
Topic 1 Rotated</th>
<th class="rotate" colspan="1">Topic 2 Rotated</th>
<th class="rotate" colspan="1">Topic 3 Rotated</th>
<th class="rotate" colspan="1">Topic 4 Rotated</th>
<th class="rotate" colspan="1">Topic 5 Rotated</th>
<th class="rotate" colspan="1">Topic 6 Rotated</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
答案1
得分: 1
你可以使用三行作为表头，并像这样调整 rowspan 属性：
<table class="table" border="1">
<thead>
<tr>
<th class="rotate" rowspan="3">
第一个旋转表头
</th>
<th class="rotate" rowspan="3">
第二个旋转表头
</th>
<th class="rotate" rowspan="3">
第三个旋转表头
</th>
<th class="rotate" rowspan="3">
第四个旋转表头
</th>
<th class="rotate" rowspan="3">
第五个旋转表头
</th>
<th class="rotate" rowspan="2">
第六个旋转表头
</th>
<th class="rotate" rowspan="2">
第七个旋转表头
</th>
<th class="rotate" rowspan="2">
第八个旋转表头
</th>
<th class="rotate" rowspan="2">
第九个旋转表头
</th>
<th colspan="6">
大列组标题
</th>
<th class="thlarge" rowspan="3">
附加注释
</th>
</tr>
<tr>
<th class="rotate" rowspan="2">
主题1旋转
</th>
<th class="rotate" rowspan="2">
主题2旋转
</th>
<th class="rotate" rowspan="2">
主题3旋转
</th>
<th class="rotate" rowspan="2">
主题4旋转
</th>
<th class="rotate" rowspan="2">
主题5旋转
</th>
<th class="rotate" rowspan="2">
主题6旋转
</th>
</tr>
<tr>
<th>
1
</th>
<th>
2
</th>
<th>
3
</th>
<th>
4
</th>
</tr>
</thead>
<tbody>
<!-- 此处省略了表格数据部分 -->
</tbody>
</table>
这是你提供的HTML代码的翻译部分。
英文:
You could use three rows as header and adjust the rowspan attributes like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table class="table" border="1">
<thead>
<tr>
<th class="rotate" rowspan="3">
First Rotated Header</th>
<th class="rotate" rowspan="3">
Second Rotated Header</th>
<th class="rotate" rowspan="3">
Third Rotated Header</th>
<th class="rotate" rowspan="3">
Fourth Rotated Header</th>
<th class="rotate" rowspan="3">
Fifth Rotated Header</th>
<th class="rotate" rowspan="2">
Sixth Rotated Header</th>
<th class="rotate" rowspan="2">
Seventh Rotated Header</th>
<th class="rotate" rowspan="2">
Eigth Rotated Header</th>
<th class="rotate" rowspan="2">
Ninth Rotated Header</th>
<th colspan="6">
Large Colspan Group Header</th>
<th class="thlarge" rowspan="3">
Additional Comments
</th>
</tr>
<tr>
<th class="rotate" rowspan="2">
Topic 1 Rotated</th>
<th class="rotate" rowspan="2">Topic 2 Rotated</th>
<th class="rotate" rowspan="2">Topic 3 Rotated</th>
<th class="rotate" rowspan="2">Topic 4 Rotated</th>
<th class="rotate" rowspan="2">Topic 5 Rotated</th>
<th class="rotate" rowspan="2">Topic 6 Rotated</th>
</tr>
<tr>
<th>
1</th>
<th>
2</th>
<th>
3</th>
<th>
4</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论