Orient texto verticalmente en HTML como en Excel

Question

Estoy tratando de replicar función Texto vertical de Excel en HTML y se preguntaba si alguien ha intentado esto o sabe de una manera fácil de hacer esto?

Quiero que mi texto se vea como:

T

H

S

dentro de un elemento de <th>

Answer 1

Usted podría intentar este . Da un poco más de control sobre el espaciado de utilizar <br />

Desde el sitio:

CSS:

#vertical {
  width:15em; 
  padding:0;
  margin:0 auto; 
  list-style-type:none; 
  font-size:1.4em; 
  font-family:georgia, "times new roman", serif;
  }
#vertical li {
  float:left; 
  border:0.2em solid #eee;
  margin:0.1em;
  }
#vertical li a {
  text-decoration:none; 
  color:#000; 
  display:block; 
  width:1.5em; 
  height:1.5em; 
  border-top:0.1em solid #000; 
  height:auto;
  }
#vertical li a em {
  font-style:normal; 
  display:block; 
  text-align:center; 
  background:#fff; 
  border-left:0.1em solid #000; 
  border-right:0.1em solid #000;
  }
#vertical li a em.nd {
  border-bottom:0.1em solid #000;
  }
#vertical li a:hover {
  background:#eee;
  }
#vertical li a:hover em {
  background:#eee; 
  color:#800;
  }

Y el marcado:

<ul id="vertical">
  <li>
    <a href="../menu/index.html">
      <em>D</em><em>E</em><em>M</em>
      <em>O</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../menus/index.html">
      <em>M</em><em>E</em><em>N</em>
      <em>U</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../layouts/index.html">
      <em>L</em><em>A</em><em>Y</em><em>O</em>
      <em>U</em><em>T</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../boxes/index.html">
      <em>B</em><em>O</em><em>X</em>
      <em>E</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../mozilla/index.html">
      <em>M</em><em>O</em><em>Z</em><em>I</em>
      <em>L</em><em>L</em><em class="nd">A</em>
    </a>
  </li>
  <li>
    <a href="../ie/index.html">
      <em>E</em><em>X</em><em>P</em><em>L</em>
      <em>O</em><em>R</em><em>E</em><em class="nd">R</em>
    </a>
  </li>
  <li>
    <a href="../opacity/index.html">
      <em>O</em><em>P</em><em>A</em><em>C</em>
      <em>I</em><em>T</em><em class="nd">Y</em>
    </a>
  </li>
</ul>

Answer 2

IE-única solución:

<div style="writing-mode:tb-rl;filter: flipv fliph;">
    The Vertical Text
</div>

Puede intentar lo mismo para el th etiqueta.