0

我有一个显示表格的视图：

  • 行代表天数 - 每天一行
  • 列代表我的组实体 - 每个列头显示组名称和一个+图标，该图标将组扩展为代表组项的几个附加列；所以基本上我有可扩展的列分组；一次只扩展一个组；

当用户单击组名称旁边的 + 时，应将一系列列添加到此表中，每个列代表每个组项的日历数据。换句话说，一个组将扩展到其项目。如果到目前为止已显示任何其他组，它将在新组扩展之前收缩。

我的表单是 Ajax 驱动的。页面加载时，仅填充日历工作并将组标题添加到列中。

问题

  1. 我不确定如何首先实现这个表？我应该使用tableelement 还是使用floated div/ul？所有内容单元格（不是标题，也不是带有日历日期的第一列）具有相同的尺寸，因此我可以使用表格以外的其他东西。为什么我倾向于div/ul实施？因为使用浮动，动态加载表示组项的其他列会更容易。我想这使用表来实现会很棘手，因为我们不能有列组，因为我们可以有TBODY列行的元素（转置这些数据是不可能的）。

  2. 由于我的列宽度也必须相同，因此我必须垂直显示组和项目名称。这样，所有列将具有相同的宽度，但它们必须在 IE（如果可能的话 V7+）、FF 和 CH 中以这种方式显示文本。

问题

  1. 你认为应该如何完成这个视图（使用table或div/ul元素）？您还可以提出一个我没有想到的完全不同的替代方案；也许你自己实现了类似的东西......

  2. 如何可靠地旋转我的标题文本？我见过 IE 上的矩阵过滤器和 mozilla 和 webkit 浏览器上的转换，但文本看起来位于原始内容框之外。我也看过 SVG 实现，但我不知道它的浏览器支持（AFAIK IE 不支持没有插件）。

  3. 有没有办法让列保持相同的宽度但不使用文本旋转？

4

2 回答 2

0

回答问题 2：

您遇到的问题可能是因为 IE 的filter旋转和标准 CSS3 旋转使用不同的旋转点 - 即元素围绕其旋转的点。

一个使用元素的左上角，另一个使用中心点。

我所知道的跨浏览器轮换的最佳参考站点是这个：http ://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

希望有帮助。

于 2011-03-25T12:14:07.337 回答
0

适用于 FF、CH 和 IE 的解决方案

这就是我最终得到的结果，并且在不同的主要浏览器（FF、CH 和 IE）中运行良好。我在 IE8 中对其进行了测试，它可以正常工作，并且在 IE9 中也可以正常工作。因此，如果您自己需要它，这里供您将来参考：

  1. 我没有使用表格，而是使用浮动 DIV
  2. 每个单元格都是带有标题的单独 DIV
  3. 标题有旋转文本

旋转的文本在转换之前仍保留尺寸，因此最好将其包含在实际上为其提供垂直等效尺寸的不同元素中。这样其他内容流就不会中断。

这是简化的 HTML 代码：

<div class="head">
    <div class="vert">Vertical text example</div>
</div>

和随附的 CSS：

.container .head
{
    /* float your elements or inline-block them to display side by side */
    float: left;
    /* these are height and width dimensions of your header */
    height: 10em;
    width: 1.5em;
    /* set to hidden so when there's too much vertical text it will be clipped. */
    overflow: hidden;

    /* these are not relevant and are here to better see the elements */
    background: #eee;
    margin-right: 1px;
}
    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;
        /* setting background may yield better results in IE text clear type rendering */
        background: #eee;
        display: block;

        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;

        /* IE specific rotation code */
        writing-mode: tb-rl;
        filter: flipv fliph;

        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */
        transform: rotate(270deg) translate(-10em,0);
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0;
    }
于 2011-08-02T16:06:02.497 回答