我需要根据上述图像表结构的HTML表格。我试过很多方法。但是不能这样做。请帮我创建上面的图像html表
gg0vcinb1#
在这里,我在标题单元格上使用colspan,使其占用多个单元格的宽度,然后在单元格上使用rowspan,使其垂直扩展到多行。这让你喜欢90%的方式,你的形象显示。垂直/旋转的文本是可能的,但不是这个问题是关于这里,所以我没有做这一部分。
colspan
rowspan
table{ border-collapse: collapse; } td,th { padding: 3px; border: 1px solid #333; } th { background: #CCC; } .blank { background: #FFF; border: none; }
<table> <thead> <tr> <th colspan="3" class="blank"></th> <th colspan="8">Attribute Name 1</th> </tr> </thead> <thead> <tr> <th colspan="3" class="blank"></th> <th colspan="2">Attribute 1 Value 1</th> <th colspan="2">Attribute 1 Value 2</th> <th colspan="2">Attribute 1 Value 3</th> <th colspan="2">Attribute 1 Value 4</th> </tr> </thead> <tbody> <tr> <th rowspan="32" class="vertical-text">Attribute Name</th> <th rowspan="4" class="vertical-text">Attribute 2 Value 1</th> <th>Price Category 1</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 2</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 3</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 4</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th rowspan="4" class="vertical-text">Attribute 2 Value 2</th> <th>Price Category 1</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 2</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 3</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 4</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th rowspan="4" class="vertical-text">Attribute 2 Value 3</th> <th>Price Category 1</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 2</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 3</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 4</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th rowspan="4" class="vertical-text">Attribute 2 Value 4</th> <th>Price Category 1</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 2</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 3</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>Price Category 4</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
1条答案
按热度按时间gg0vcinb1#
在这里,我在标题单元格上使用
colspan
,使其占用多个单元格的宽度,然后在单元格上使用rowspan
,使其垂直扩展到多行。这让你喜欢90%的方式,你的形象显示。垂直/旋转的文本是可能的,但不是这个问题是关于这里,所以我没有做这一部分。