表格th中的CSS垂直文本

I would like to have a table like this one:

我想要一张这样的桌子:

                 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

...

I mean i need a CSS to make my table td's text vertical.

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

I was trying different things in the following snippet with no success:

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

.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>

Hope someone can help me with this...

希望有人能帮助我……

1 个解决方案

#1

An easy way of doing it is to wrap your text in a separate element and apply the width/word-wrap technique to it.

一种简单的方法是将文本包装在一个单独的元素中，并将宽度/文字包装技术应用于它。

You may need to adjust the line-height to control the spacing between the letters.

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

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>

#1