Halim Halim - 11 months ago 30
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.


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;
  padding:5px 2em;

For this html:

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

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:


Alternatively, you can do something like this: http://codepen.io/anon/pen/grvgwZ




    writing-mode: vertical-rl;
    text-orientation: upright;