Halim Halim - 4 months ago 7
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

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;
}
Comments