Question

我要设计的表最终将变得有些动态。我希望表格标题单元格显示为旋转（以节省水平空间）。我知道可能有更好的方法来节省一些表空间，但是当我在玩一些HTML时，我对似乎不太可能的事情产生了兴趣。

在以下代码中，我尝试旋转单元格：

th {
  background-color: #ccc;
}

th,
td {
  border: 1px solid #000;
}

.rotate {
  transform: rotate(-90deg);
  text-align: center;
  margin-bottom: 100px;/* <-- Anything I could do here? */
}

<table cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="rotate">
        Foo
      </th>
      <th class="rotate">
        Bar
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Foo collection
      </td>
      <td>
        Bar collection
      </td>
    </tr>
  </tbody>
</table>

为了解决我的问题，我在其他几个问题中发现了code个问题，但是其中大多数问题都没有解决我遇到的问题：

只要给定表格单元格的内容增加（例如，更多的字符和/或单词），内容就会在给定单元格外流动或破坏单元格的外观。

首先，我希望我的表格单元格停留在它们应该放置的位置（因此，不要像上面我的小提琴中那样在其他单元格上悬停）：

其次，我希望能够调整这些单元格中的文本，这意味着这些单元格必须能够调整大小而又不会破坏表格的布局：

换句话说：我想创建旋转的表头单元，而不会丢失任何HTML的表默认功能。可以旋转表标题单元格（<th>元素）而不破坏表吗？

Answer 1

要更改文本的书写方向时，可以使用writing-mode。在这种情况下，我使用writing-mode: vertical-lr;，它使文本垂直，并且容器高度将更改以适合文本。我们还需要将文本旋转到位，但是将来我会使用sideways-lr，它现在没有支持。

th {
  background-color: #ccc;
}

th,
td {
  border: 1px solid #000;
}

.rotate span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<table cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="rotate">
        <span>Foo</span>
      </th>
      <th class="rotate">
        <span>Foo Bar Bazz</span>
      </th>
      <th class="rotate">
        <span>FooBar</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Foo collection
      </td>
      <td>
        Foo Bar Bazz collection
      </td>
      <td>
        Foo Bar collection
      </td>
    </tr>
  </tbody>
</table>

Answer 2

如果您打算动态更改它们，请创建一个CSS类并添加：

.rotate-text {
    //for old browsers
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg) ;
    -o-transform: rotate(90deg) ;
    -ms-transform: rotate(90deg) ;
    //for all modern browsers
    transform: rotate(90deg);
}

现在使用jQuery检查单词数是否增加了目标，如果为true，则在TD或TH内切换上面创建的类</ p>

jQuery("th").toggleClass("rotate-text");

希望对您有帮助。

如何旋转表格标题单元格并自动调整为内容大小？

2 个答案: