Bootstrap 我需要从HTML设计下面的图像表

nlejzf6q  于 2023-05-04  发布在  Bootstrap
关注(0)|答案(1)|浏览(93)

我需要根据上述图像表结构的HTML表格。我试过很多方法。但是不能这样做。
请帮我创建上面的图像html表

gg0vcinb

gg0vcinb1#

在这里,我在标题单元格上使用colspan,使其占用多个单元格的宽度,然后在单元格上使用rowspan,使其垂直扩展到多行。
这让你喜欢90%的方式,你的形象显示。垂直/旋转的文本是可能的,但不是这个问题是关于这里,所以我没有做这一部分。

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>

相关问题