表格中的CSS垂直文本

Question

我想有一张像这样的表：

                 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>