表格内的CSS3变换对齐问题

Question

我试图实现一个文本旋转-90degrees的表.到目前为止,我一直在使用文本的图像,但我希望将其更改为文本.

我似乎无法解决一些问题.

1. 第07列文本溢出到第08列.
   • 我无法通过溢出来解决这个问题:隐藏; 因为我必须将宽度和高度都设置为200px才能获得正确的形状.
2. 我必须设置旋转文本的宽度和高度,这使得它不能使用起来非常灵活,这也会导致问题1.
3. 我必须将余量设置为"0 -100px",因为我必须将宽度设置为200px,但一旦旋转,其宽度仍然是200px,这将使表格难以置信.
4. 如果更改了字体大小,它将不再适合列.
5. 字体看起来很糟糕,很难读懂.我认为这将在未来的浏览器更新中发挥作用.

这是一个实际的jsFiddle

http://jsfiddle.net/CoryMathews/ZWBHS/

我需要它才能工作,并且已经在IE7 +,Chrome,FF和Opera中获得了相同的功能.

有关如何改进此方法使其实际可用的任何想法？我的一些想法是:

1. 我可以在页面加载时使用一些javascript计算宽度,高度等,这将解决上面的问题2和3但不是1.然而我讨厌依赖javascript进行显示.

2. 也许我误用了可以让我更好地控制的变换起源.我目前使用"0 0"的数字让我可以轻松计算出所需的尺寸.

Answer 1

此解决方案可以解决您的一些问题,但并不完美:

1. 使用whitespace: nowrap禁用的文本流动到下一行.
2. 将每个单元格的内容包装在容器中width: 1em.列总是足够宽,可以显示1行垂直文本.您可以自由调整字体大小.

3. 手动设置表格的高度以完全显示旋转的内容(-90度).硬编码高度不是很好,但有一些优点:不需要固定宽度和负边距来抵消固定宽度/变换原点/相对定位/ JavaScript; 文本自动捕捉到列的底部.

4. 见2.

5. 建议使用Sans-serif字体.字体越不详细,它们在变换后看起来越好.

这适用于Firefox,Chrome,Opera,IE9 +.垂直文本在IE8及更早版本中不起作用.我尝试使用以下方法旋转表:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)

结果看起来很可怕,所以我添加了后备样式来显示一个简单的水平表.

body {
    font-family: sans-serif;
    padding: 10px;
    font-size: 12px;
}

td, tr, th, table { border: 1px solid #333; }
td:nth-child(odd) { background: #eee; }
td {
    overflow: hidden;
    white-space: nowrap; /* text on one line only */
    vertical-align: bottom;
    height: 300px; /* to be adjusted: column is not always tall enough for text */
}

td > div {
    padding: 10px;
    width: 1em; /* column is always wide enough for text */
}

td > div > div {
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
}

<!--[if LT IE 9]>
    <style>
        table { width: 100px; }
        td {
            white-space: normal;
            vertical-align: baseline;
            height: auto;
        }
        td > div {
            width: auto;
        }
    </style>
<![endif]-->
<table>
    <tr>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
        <th>07</th>
        <th>08</th>
        <th>09</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
    </tr>
    <tr>
        <td><div><div>Report Results 1</div></div></td>
        <td><div><div>Shinanigans</div></div></td>
        <td><div><div>CSS Transforms Suck</div></div></td>
        <td><div><div>Lorem Ipsum</div></div></td>
        <td><div><div>So Damn Pixelated</div></div></td>
        <td><div><div>This font looks Terrible</div></div></td>
        <td><div><div>Too Long to read on 1 line Set dimensions suck</div></div></td>
        <td><div><div>Grumble Grumble.</div></div></td>
        <td><div><div>Homebrew!</div></div></td>
        <td><div><div>Spotify Commercial Suck</div></div></td>
        <td><div><div>Grooveshark FTW!</div></div></td>
        <td><div><div>Beer time yet?</div></div></td>
    </tr>
</table>