表 th 中的 CSS 垂直文本

Question

我想要一张这样的 table :

                 C
        F        r
        r  I  C  o
        a  t  h  a 
        n  a  i  c
        c  l  n  i
# user  e  y  a  a
- ---- -- -- -- --
1  a   1p  1p 2p 1p
- ---- -- -- -- --
2  b   1p  2p 1p 4p

... 

我的意思是我需要一个 CSS 来使我的表格 td 的文本垂直。

我在下面的代码片段中尝试了不同的东西但没有成功:

.vertical{
    width:1px;
    word-wrap: break-word;
}

 <table>
                          <thead>
                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th class="vertical">France</th>
                                <th class="vertical">Italy</th>
                                <th class="vertical">China</th>
                                <th class="vertical">Croacia</th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                        </table>

希望有人能帮助我...

Answer 1

一个简单的方法是将文本包装在一个单独的元素中，然后对其应用宽度/自动换行技术。

您可能需要调整行高来控制字母之间的间距。

th {
  vertical-align: bottom;
  border-bottom: 1px solid gray;
}
.vertical {
  width: 10px;
  word-wrap: break-word;
  line-height: 1.0;
}

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>User</th>
      <th><div class="vertical">France</div></th>
      <th><div class="vertical">Italy</div></th>
      <th><div class="vertical">China</div></th>
      <th><div class="vertical">Croacia</div></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>