Vertical table headers in html

Issue

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:

enter image description here

Solution

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

Answered By – Richard Hamilton

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published