旋转表格列标题 | CSS-Tricks

假设您有一个表格标题（即 <th>）为“按国家/地区划分的吼猴物种数量”，并且对应 <td> 中的数据为“3”。这在宽度上存在尴尬的不匹配。

对于两列来说，这可能不是一个大问题，但如果您有20列，那么导航将非常困难，并且空间利用率很差。更好的空间利用方式是旋转标题，以便列宽可以更窄。

但是，旋转90度过头了。这使得阅读变得困难。

有趣的是，如果我们将标题旋转45度而不是旋转90度，我们将获得几乎相同数量的空间节省，并且它们更容易阅读。

技巧

这里有一些技巧。

我们将需要使用 transform: rotate() 来调整标题的角度。Chrome/Safari 允许您直接在 <th> 上执行此操作，但是我发现 Firefox 中文本以这种方式消失，因此让我们在一个嵌套的 <div> 中执行此操作，我们将强制它成为我们希望列具有的宽度（直接强制单元格变窄也不起作用）。我们还需要另一个嵌套元素，所以…

<th class="rotate"><div><span>Column header 1</span></div></th>

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

请注意那里的神奇数字。我相信你们中的一些人足够聪明，可以找出与那里所有其他数字的数学关系。事实上，我的示例最初是 Jimmy Bonney 的列标题旋转文章的分支。我能够在没有他使用的 skew() 的情况下完成它，我认为这使得它更简单了一些，但他也使用 tan() 和 cos() 计算了一些数学内容，如果您自己开始深入研究，这可能是一个好的起点。

后备方案

如果您走这条路，您可能需要确保您没有应用会破坏表格的规则，如果转换不起作用。Modernizr 可以测试这一点并将支持/不支持类应用于 <html> 元素，因此您可以编写如下内容

/* These aren't needed and will be weird if transforms don't work */
.csstransforms th.rotate {
  height: 140px;
  white-space: nowrap;
}

您如何执行后备方案取决于您自己，但它可能比让表格变得非常宽更糟糕

我的最终演示已实施此功能。

演示

它是用 Sass 编写的，如果您想对其进行分叉并找到一些使用变量和数学等方法使其更具适应性的方法，则可以使用它。

mike

# 2014年3月27日

您可以将该曲线路径应用于文本吗？

两个单词长度直线，然后开始轻微弯曲，以45º结束

Gumnos

# 2014年3月27日

不使用更易读的“rotate(-45)”而使用“rotate(315)”有什么原因吗？

Chris Coyier

评论永久链接# 2014年3月27日

说得好，随意。

GeckoTang

# 2014年3月27日

很棒的文章:)

但是，演示不起作用。
它无法读取 Modenizr 脚本。

Chris Coyier

评论永久链接# 2014年3月27日

CodePen 错误，我们正在处理。我将隐藏此内容，因为我已经在短期内修复了它。

MaxArt

# 2014年3月27日

请记住，您可以对 IE<9 使用 writing-mode: tb-lr;，最终添加旧版 filter: flipv fliph;。
我不会尝试对 45 度文本使用过滤器…

Heinz

# 2014年3月28日

这很好，谢谢！
但是，如果您在旋转和未旋转的标题单元格之间混合使用，则必须恢复
到 90 度旋转并将文本垂直对齐到底部。如果您
有多行文本作为标题单元格内容，或不同长度的旋转标题单元格，则会变得更复杂。

如果所有这些都可以完全通过 CSS 处理，那就太棒了！
请告知。

T.J. Crowder

# 2014年3月28日

遗憾的是，在 Chrome、Firefox 和 Opera 中，文本间距和基线最终变得不均匀。IE10 看起来很棒，但其他浏览器则参差不齐。

Colby

# 2014年3月28日

哦哦。花哨。感谢分享。

Christian

# 2014年3月29日

在我的 Firefox 中看起来不错。

Mohit Bumb

# 2014年3月29日

什么是 SCSS ？

Roger

评论永久链接# 2014年3月29日

有点偏离主题，Mohit，但这是一个合理的问题。SCSS 是 SASS（Syntactically Awesome Style Sheets）的演进语法，代表 Sassy CSS。这些是 CSS 的扩展，为基本语言添加了强大的规则（有点像编程语言），例如添加变量和函数来操作值的功能。您可以访问此处了解更多信息：SASS

Derek

# 2014年4月1日

使用 translate3d(25px, 51px, 0) 而不是 translate(25px, 51px) 可以稍微清理锯齿（Windows），尽管基线仍然有点不稳定。

Andreas

# 2014年4月2日

这很酷。
感谢您的提示 :)

@thewendee

# 2014年4月2日

这很花哨，是的，我喜欢它！您知道什么会让它更花哨一点，那就是这些属性会随着语言方向自动翻转。使用表格的优势之一是它们具有匹配方向的神奇翻转功能。但是，我们一直在平衡浮动和绝对位置以进行方向更改，因此我们也可以管理这一点。我会使用这种技术。

Heinz

# 2014年4月2日

受本文和我的需求（如我在上面批评中表达的那样）的启发，我摸索着找到了一个 JavaScript 解决方案（42 行），它满足了我的所有需求。

演示位于此处，源代码和自述文件位于 GitHub。

Jeffrey Ridout

# 2014年4月7日

不错。
在 span 上使用 transform-origin: left bottom、display: inline-block 以及在 div 和 span 上使用 box-sizing: border-box 意味着“神奇”数字可以更容易一些。您只需要将其向右移动列的宽度。

transform: translate3d(40px, 1px, 0) rotate(-45deg);
width: 30px;
transform-origin: left bottom;
box-sizing: border-box;

javad sharyati

# 2014年4月7日

你好
如果表格方向=> rtl，请更改此 CSS

...
th.rotate > div {
  transform:  translate(45px, -20px)

...

谢谢

Bharath

# 2014年4月27日

对于小型移动设备来说，这确实是一次不错的体验。有效地利用空间。

Meena vinay

# 2014年6月4日

您好，我想将表格标题设置为您在示例中所做的那样。但是当我检查您的代码时，它对我不起作用。并且我还希望倾斜的值也位于页脚位置以映射值。请帮忙

此评论线程已关闭。如果您有重要信息要分享，请联系我们。