HTML表格，在列中，标题是水平的，行是垂直的

Question

简短解释

我想创建一个像这样的HTML表格

{{0}}

提前谢谢。

Answer 1

将来，请尝试提供一些代码，以便我们了解您正在做的事情;如果您提供代码，语言障碍不一定是不可逾越的障碍。

我想我知道你哪里遇到麻烦;它是垂直运行的列。我建议你为CSS尝试类似的东西：

tbody tr:first-of-type td{
  word-wrap: break-word;
  width:1px;
  padding:5px 2em;
}

对于这个html：

  <tr>
    <td></td>
    <td>C o l u m n 1</td>
    <td>C o l u m n 2</td>
    <td>C o l u m n 3</td>
    <td>C o l u m n 4</td>
    <td>C o l u m n 5</td>
  </tr>

如果您不想在其中安装高级选择器，则可以轻松地将类应用于每个相关单元格。这是一个codepen作为演示：

http://codepen.io/anon/pen/YWZNzV

或者，您可以这样做： http://codepen.io/anon/pen/grvgwZ

HTML

  <tr>
    <td></td>
    <td><span>Column&nbsp;1</span></td>
    <td><span>Column&nbsp;2</span></td>
    <td><span>Column&nbsp;3</span></td>
    <td><span>Column&nbsp;4</span></td>
    <td><span>Column&nbsp;5</span></td>
  </tr>

的CSS

span{  
    writing-mode: vertical-rl;
    text-orientation: upright;
}