javascript - 如何以两层结构设计表格，使x轴位于所有x轴数据的顶部，并使所有文本垂直于水平

我需要像下面的屏幕快照那样设计我的桌子。



现在我的大腿看起来像这样-



如您所见，第一列指的是issuetype \ assignee。这里的issuetype是y-axix，而受让人是x-axix。因此，我需要将其设计为需要放置所有受让人名称的类型1，类型2，类型3等，并放置所有发行类型的对象1，Assingee 2等。

我表中的IssueType是：子任务-创建IR，更改地址等

受让人：aziah.purwitasar等

我无法实现这种格式。我正在使用Twitter引导程序，我不知道是否可以使用引导程序。如果不是纯HTML + CSS也可以。

有人可以帮我设计这种结构吗？小提琴演示将非常有帮助。

嘿，有帮助。但是现在在chrome中存在边界问题。

Firefox完全按照我的意愿来了。



您可以看到Chrome浏览器的边框也出现在issueType列中。但是我们将rowspan = 2设置为不应该出现。有什么问题？

最佳答案

试试这个代码，我想你可能需要这个：

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: center;
}

<table style="width:100%">
  <tr>
    <th rowspan="2">Assigne</th>
    <th colspan="5">Issue Type</th>
  </tr>
  <tr>
    <td>Type1</td>
    <td>Type2</td>
    <td>Type3</td>
    <td>Type4</td>
    <td>Type5</td>
  </tr>
  <tr>
    <td>Assigne1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>