excel과 같이 html에서 텍스트를 수직으로 방향으로 지정하십시오

Question

HTML에서 Excel의 수직 텍스트 기능을 복제하려고 노력하고 누군가가 이것을 시도했는지 또는 쉽게 수행 할 수있는 방법을 알고 있는지 궁금해하고 있습니까?

내 텍스트가 다음과 같이 보이기를 원합니다.

티

시간

나

에스

내부 <th> 요소

Answer 1

당신은 시도 할 수 있습니다 이것. 사용하는 것보다 간격을 조금 더 제어 할 수 있습니다 <br />

사이트에서 :

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

그리고 마크 업 :

<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 전용 독점 :

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

TH 태그에 대해 같은 것을 시도 할 수 있습니다.