How can I rotate text inside table td not on table th?

Question

I've been searching and toying with transform: rotate() of css for hours but failed to get the result I wanted. I've checked on these links 1, 2, 3 and more.

Other that the header I cannot make it to work with other cells, the width of the column expands when use whitespace: no-wrap and without it the text files up vertically one after the other. The image below should clearly explain what I'm intending to do.

Here's what I have:

		table {
			border: 1px solid #000;
			border-collapse: collapse;
		}

		table td {
			border: 1px solid #000;
		}

		.rotate {
			white-space:nowrap;
		    -webkit-transform: rotate(-90deg);
		    -webkit-transform-origin: 10px;
		    -moz-transform: rotate(-90deg);
		    -moz-transform-origin: 10px;
		    -ms-transform: rotate(-90deg);
		    -ms-transform-origin: 10px;
		    -o-transform: rotate(-90deg);
		    -o-transform-origin: 10px;
		    transform: rotate(-90deg);
		    transform-origin: 10px;
		}

  <table>
        <tr>
            <td colspan="2">HEADER</td>
            <td>HEADER</td>
        </tr>
        <tr>
            <td rowspan="4" class="rotate">QUITE LONG TEXT</td>
            <td rowspan="2" class="rotate">TEST 1</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
        <tr>
            <td rowspan="2" class="rotate">TEST 2</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
    </table>

Solution 1

There’s a CSS attribute called writing-mode that accepts one of these three values; horizontal-tb, vertical-rl and vertical-lr.

horizontal-tb is the default and it causes the typical left to right horizontal text flow in an element.

The vertical-* values however are for vertical block flow, causing text to be written from top to bottom by the browsers. In vertical-rl, new lines are added to the left of the previous ones and vice versa for vertical-lr.

This is useful for displaying languages like Chinese and Japanese that are typically written from top to bottom and also for when you wish to display text vertically to save horizontal space, like in table headers.

div {
  font-family: courier new;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
}

table tr:not(:first-child) th {
  display: inline-block;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

th {
  padding: 6px;
}

#writing-mode img {
  width: 35px;
}

td {
  width: 40px;
  border: 1px dotted black;
}

tr:nth-child(2) th {
  background: #69D2E7;
}

tr:nth-child(2) td {
  background: #A7DBD8;
}

tr:nth-child(3) td {
  background: #F1D4AF;
}

tr:nth-child(3) th {
  background: #E08E79;
}

tr:nth-child(4) td {
  background: #CFF09E;
}

tr:nth-child(4) th {
  background: #79BD9A;
}

tr:nth-child(5) td {
  background: #D5DED9;
}

tr:nth-child(5) th {
  background: #99B2B7;
}

tr:nth-child(6) td {
  background: #EBE3AA;
}

tr:nth-child(6) th {
  background: #CAD7B2;
}

#browser-support {
  background: ivory;
  border-left: 6px skyblue solid;
  font-family: courier new;
  font-size: 14px;
  margin: 12px 0;
  padding: 6px;
}

<div id="writing-mode">
  <h3>Time Table</h3>
  <table>
    <tr>
      <th style="width:20px"> </th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
    </tr>
    <tr>
      <th>Monday</th>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-chalkboard-64.png" alt=""></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt=""></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-globe-128.png" alt="" /></td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
    </tr>
    <tr>
      <th>Thursday</th>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-chalkboard-64.png" alt=""></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
    </tr>
    <tr>
      <th>Friday</th>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-globe-128.png" alt="" /></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-microscope-128.png" alt="" /></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;></td>
      <td contenteditable="true" ;><img src="https://cdn2.iconfinder.com/data/icons/hand-drawn-academic-icons-2/300/handdrawn-flask-128.png" alt=""></td>
    </tr>
  </table>

</div>

from: http://www.hongkiat.com/blog/css-tricks-more/

Solution 2

Thanks to Vinicius Santana for pointing me to the right direction.

After some trial and error this is what I came up with. Exactly what I'm looking for as described from the image attached to this question.

CODE:

CSS:

    <style type="text/css">
        table {
        border: 1px solid #000;
        border-collapse: collapse;
    }

    table td {
        border: 1px solid #000;
    }

    .rotate {
        -webkit-transform: rotate(-180deg);        
        -moz-transform: rotate(-180deg);            
        -ms-transform: rotate(-180deg);         
        -o-transform: rotate(-180deg);         
        transform: rotate(-180deg);
        writing-mode: vertical-lr;

    }

HTML:

<table>
        <tr>
            <td colspan="2">HEADER</td>
            <td>HEADER</td>
        </tr>
        <tr>
            <td rowspan="4" class="rotate">QUITE LONG TEXT</td>
            <td rowspan="2" class="rotate">TEST 1</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
        <tr>
            <td rowspan="2" class="rotate">TEST 2</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
    </table>

Solution 3

Add padding property to table>td and change .rotate class attributes like i do in CSS demo below.

table td {
        border: 1px solid #000;
        padding: 12px;
    }

Demo:-

table {
			border: 1px solid #000;
			border-collapse: collapse;
		}

		table td {
			border: 1px solid #000;
            padding: 12px;
        }

		 .rotate {
            white-space:nowrap;
             -webkit-transform: rotate(270deg);
             -moz-transform: rotate(270deg);
             -o-transform: rotate(270deg);
            writing-mode: lr-tb;
          }

<table>
        <tr>
            <td colspan="2" style="text-align:center;">HEADER</td>
            <td>HEADER</td>
        </tr>
        <tr>
            <td rowspan="4" class="rotate">QUITE LONG TEXT</td>
            <td rowspan="2" class="rotate">TEST 1</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
        <tr >
            <td rowspan="2"  class="rotate">TEST 2</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
    </table>

Hope this will help you.. !

Comments

[Starfish]

You can use a static height on your .rotate or you can use javascript: Get the width of the text and apply the value for the height.