css - 表格内的 CSS3 变换对齐问题

Question

我正在尝试实现一个文本旋转 -90 度的表格。到目前为止，我一直在使用文本的图像，但是我希望将其更改为文本。

有一些问题我似乎无法解决。

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. 推荐使用无衬线字体。字体越不详细，它们在转换后的效果就越好。

这适用于 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>

Answer 2

在表格上应用转换会使所有浏览器变得疯狂。我也遇到了多行问题，我发现的唯一解决方法是更改​​表格标记，以便旋转的不是 div，而是整个表格。

然后，您使用反向转换“取消旋转”您的表头：

http://jsfiddle.net/G93KE/

我不知道这是否适用于 IE7-8 过滤器。

Answer 3

作为 Duopixel ，（不旋转）

<style>

body { font-family: "Times New Roman", Times, serif; padding:10px; }
td, tr, th, table { border:1px solid #333; }
td:nth-child(odd) { background:#eee; } /* No IE, No Cares */

td.title { width:200px; }

table {       
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    width:250px; 

    position:relative;
    top:250px;
  }

td > div {       
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    position:relative; /*Needed to position in the correct columns*/
    height:20px; /* Need to not set this, needed for columns to fill*/
    left:20px; /*Needed to line up, .5 of width - padding*/
}

</style>

<!--[if LT IE 9]>
    <style>
        table {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            top:0px;
        }
        td div { /* ah..? didn't action of filter..? by td > div..? */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            overflow:hidden;
            width:20px; /* fix to number.. */
            height:20px; /* fix to number.. */
        }
    </style>
<![endif]-->
<table>
    <tr>
        <td class=title >Report Results 1</td>
        <td><div>01</div></td>
    </tr>
    <tr>
        <td class=title >Shinanigans</td>
        <td><div>02</div></td>
    </tr>
    <tr>
        <td class=title >CSS Transforms Suck</td>
        <td><div>03</div></td>
    </tr>
    <tr>
        <td class=title >Lorem Ipsum</td>
        <td><div>04</div></td>
    </tr>
    <tr>
        <td class=title >So Damn Pixelated</td>
        <td><div>05</div></td>
    </tr>
    <tr>
        <td class=title >This font looks Terrible</td>
        <td><div>06</div></td>
    </tr>
    <tr>
        <td class=title >Too Long to read on 1 line Set dimensions suck</td>
        <td><div>07</div></td>
    </tr>
    <tr>
        <td class=title >Grumble Grumble.</td>
        <td><div>08</div></td>
    </tr>
    <tr>
        <td class=title >Homebrew!</td>
        <td><div>09</div></td>
    </tr>
    <tr>
        <td class=title >Spotify Commercial Suck</td>
        <td><div>10</div></td>
    </tr>
    <tr>
        <td class=title >Grooveshark FTW!</td>
        <td><div>11</div></td>
    </tr>
    <tr>
        <td class=title >Beer time yet?</td>
        <td><div>12</div></td>
    </tr>
</table>

Answer 4

首先让我们修复重叠文本： td{white-space:nowrap;}

CSS 转换在一方面有点类似于“位置：相对”，它们修改对象的呈现而不是它在流中的位置。这意味着目前无法根据 div 宽度动态调整单元格高度（至少在开始实现 css 表达式之前）。

考虑到这一发现，我们现在可以自由地将 div 带出我们想要的所有内容。我要去把它绝对设置在父单元格的左上角。作为一名训练有素的专业人士，我可以这样做： td{position:relative;} td>div{position:absolute;top:0;left:0;}

看看这个，现在单元格的整个内容已经向上移动了。我们不能只调整方块的位置，因为它会影响它的变换方式；相反，我们将调整块位移：margin:100% 0 -100%;

我们已经从上面的流程中删除了元素（也是有充分理由的），现在我们只需将高度应用到父单元格，我们就可以开始了：

http://jsfiddle.net/ZWBHS/2/

更新：

您始终可以添加 text-overflow 属性并修复文本和单元格大小，以便它需要最少的工作更新，如http://jsfiddle.net/ZWBHS/3/

这样被截断的文本就不会丢失，也许会添加一个重复的标题属性？