Vertical table headers in html

Question

Consider the following html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Test of table</title>
        <style type="text/css">
            p {text-align:justify;}
            li {text-align:justify;}
            ins {background-color:#A0FFA0;}
            del {background-color:#FFA0A0;}
            .code {background-color:#EEEEEE;}
            .codex {background-color:#FFFFE0;}
            .custom-table {
                text-align:center;
                font-family:monospace;
            }
        </style>
    </head>
    <body>
        <table border="1" class="custom-table">
            <tr>
                <th></th>
                <th>First column</th>
                <th>Second column</th>
                <th>Third column</th>
            </tr>
            <tr>
                <td>First row</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Second row</td>
                <td>2</td>
                <td>4</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Third row</td>
                <td>3</td>
                <td>6</td>
                <td>9</td>
            </tr>
        </table> 
    </body>
</html>

I would like the First column, Second column, Third column (or in other words, all the th elements of the custom-table) texts to be non-bold, vertically written (+90° rotation counter-clockwise), vertically centered and horizontally centered within header cells. How to do that by modifying this document?

Note: I don't need backward compatibility with non-html5 browsers, I don't want javascript, and I don't want an external CSS.

Here is an example of the kind of alignment I want:

@RichardHamilton I know. But this html is not for a website. I am writing an official document for a committee, and they want html file format (and no external file). — Vincent, Jul 08 '16 at 16:05
there is a good solution here if it's still relevant: https://stackoverflow.com/a/50406895/5210321 — Max Leizerovich, Jul 30 '19 at 01:56

Richard Hamilton · Accepted Answer · 2016-07-08T17:31:31.513

Edit: Just found out you wanted it rotated counter-colockwise. In that case use -90deg

To have text vertically written, you can use the transform: rotate(-90deg) property. The default font-weight for th elements is bold, so we need to override that, making the font-weight normal.

You should be able to get away with just transform, but depending on the browser, you might need to include vendor prefixes. This should be what you're looking for

<head>
  <style>
    /* Generally, you should put CSS in a separate file, but for the purpose of this post, I'm including it in the style tag. */
    p, li { text-align: justify; }
    ins { background-color: #A0FFA0; }
    del { background-color: #FFA0A0; }
    .code { background-color: #EEEEEE; }
    .codex { background-color: #FFFFE0; }
    
    .custom-table {
      text-align: center;
      font-family: monospace;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    th {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      width: 95px;
      font-weight: normal;
    }
    td, th {
      border: 1px solid black;
    }
    
    /* Can't eliminate the spacing no matter what I try */
    th:first-child {
      height: 100px;
    }
    th:not(:first-child) {
      height: 10px;
    }
    
    td:nth-child(2), td:nth-child(3), td:nth-child(4) {
      width: 10px;
    }
  </style>
</head>

<body>
  <table class="custom-table">
    <tr>
      <th></th>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
    </tr>
    <tr>
      <td>First row</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Second row</td>
      <td>2</td>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Third row</td>
      <td>3</td>
      <td>6</td>
      <td>9</td>
    </tr>
  </table>
</body>

Edit: Got it to look more like the screenshot, but couldn't figure out how to change the width of the cells. Looks like this is the best I can do for now

How to have the correct borders? How to have the correct cell width (same behaviour as for the horizontal ones)? — Vincent, Jul 08 '16 at 16:03
You can eliminate the width of the header by wrapping the text in an element inside the `th`, and setting `position: absolute` on it. — geon, Nov 06 '18 at 11:41
Downside of this solution is when you're increasing `` content to a certain extent, it will break the table layout. — Barrosy, Jul 05 '19 at 11:52

score 0 · Answer 2 · answered Jul 08 '16 at 15:58

To make the th non bold change them to standard td

for counter clockwise rotation

td.class-given-to-old-ths{

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

score 0 · Answer 3 · answered Aug 05 '22 at 18:57

CSS:

th {writing-mode:vertical-rl; transform:rotate(180deg)}

HTML:

<table>
    <tr><th>COL A</th><th>COL B</th><th>COL C</th></tr>
    <tr><td>001</td><td>002</td><td>003</td></tr>
    <tr><td>101</td><td>102</td><td>103</td></tr>
    <tr><td>201</td><td>202</td><td>203</td></tr>
</table>

RESULTS:

COMMENTARY: This method retains background shading, etc. Simple. Quick. Easy.

Vertical table headers in html

3 Answers3