Halim Halim - 1 year ago 41
HTML Question

A HTML Table,In a column, header is horizontal, rows are vertical

with a shortly explain

I want to create a html table like that
enter image description here

Thank you in advance.

Answer Source

In the future, please try to provide some code so that we may understand what you're doing; language barriers need not be an impassable obstacle if you provide code.

I think I know where you have some trouble; it's with the columns running vertically. I'd suggest you try something like this for the CSS:

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

For this 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>

If you don't want to have the advanced selector in there, you can easily apply a class to each of the relevant cells. Here's a codepen as a demo:

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


Alternatively, you can do something like this: 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;
}