表格内的CSS3变换对齐问题

时间：2012-02-24 22:09:22

标签： css css3 css-transforms

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

CSS3 rotated text within a table

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

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

    6. 这是一个jsFiddle of it in action

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

    我需要它才能工作，并且已经在IE7 +，Chrome，FF和Opera中达到了同样的目的。

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

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

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

4 个答案:

答案 0 :(得分：7)

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

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

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

  4. 见2.

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

    6. 适用于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>

答案 1 :(得分：3)

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

然后使用反向转换“解旋”表标题：

http://jsfiddle.net/G93KE/

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

答案 2 :(得分：1)

作为Duopixel，（unrotate）

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

答案 3 :(得分：1)

首先让我们修复重叠文本：     TD {空白：NOWRAP;}

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

考虑到这一发现，我们现在可以自由地将div从流程中取出。我要把它绝对设置在父细胞的左上角。作为一名训练有素的专业人士，我被允许这样做：     TD {位置：相对;}     TD＆GT; DIV {位置：绝对的;顶部：0;左：0;}

好吧，看看这个，现在整个细胞的内容已经向上移动了。我们不能只调整块的位置，因为它会影响块的转换方式;相反，我们将调整块位移：     保证金：100％0 -100％;

我们已经从上面的流程中取出了元素（并且也是有充分理由的），现在我们只是将高度应用于父单元格，我们很高兴：

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

<强>更新

您始终可以添加文本溢出属性并修复文本和单元格大小，以便最小化工作需要http://jsfiddle.net/ZWBHS/3/

这样截断的文本不会丢失，可能会抛出一个复制它的title属性吗？

相关问题
最新问题