9

我有一个包含数据的表。表格数据。它看起来像这样。

在此处输入图像描述

看到这个小提琴。

现在我想要的是，当它显示在较窄的屏幕上时，表格看起来像这样，这样您就不会得到水平滚动条并保持相同的视觉结构：

在此处输入图像描述

（或者如果你愿意，就像这个小提琴一样。）

现在我的问题是，你是怎么做到的？我更喜欢仅使用 CSS 的方式，但到目前为止，我还没有设法仅在 CSS 中做到这一点。（第二个小提琴包含rowspan属性，没有 CSS 等价物。）

HTML是在服务器端生成的，因此我可以根据窗口宽度生成两种布局之一，但它不会响应窗口调整大小。

我并不反对一点 Javascript，但在这种情况下，要在窗口调整大小时将第一个表转换为第二个表，它需要逐个单元地拆开和重建，我认为这是矫枉过正。仍在寻找可以完成所有工作的媒体查询。

尝试了一下，我接近了，但这在 IE8 和 IE9 中不起作用。

那么，有人对如何解决这个问题有任何想法吗？理想的解决方案适用于不同高度（2 行或更多文本）和任意列数的表格单元格。

4

4 回答 4

2

是的，因为您的 html 是相同的，您可以根据媒体查询更改 css 属性的样式，更好的解决方案将是 -fiddle

@media only screen and (min-width: 769px) {
       #content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
}
@media only screen and (max-width: 768px) {
#content {
    border:1px solid;
    border-collapse:collapse;
}
#content tr {
    height:4em; border-bottom:1px solid;
}
#content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
    height:4em;
}
#content td {
    padding:.07em .2em;
    white-space:nowrap;
    height:1.4em;
    display:inline;
}
#content td:not(:last-child)::after {
    display:block; content:'';
    height:0;
    border-bottom:1px solid;
}

}

一种可能的解决方案是使用媒体查询隐藏相应的块或相应地更改样式

这是一个 将较小的表 id 更改为 content2的小提琴

@media only screen and (max-width: 768px) {
    #content{
        display:none !important;
    }
}
@media only screen and (min-width: 769px) {
    #content2{
        display:none !important;
    }
}
于 2013-11-01T09:32:04.610 回答
1

检查这个CodePen。

我很久以前在 css-tricks.com 中找到了这个解决方案。

桌子有点乱：

<table>
    <tr>
        <td>
            Description 1
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="text-center">Data 1A</td>
                        <td class="text-center">Data 1B</td>
                        <td class="text-center">Data 1C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
    <tr>
        <td>
            Description 2
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Data 2A</td>
                        <td>Data 2B</td>
                        <td>Data 2C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
</table>

这是CSS：

    /* Small display targeting */
    @media only screen and (max-width: 767px) {
        /* Force table to not be like tables anymore */
        .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        .responsive thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .responsive td {
            /* Behave  like a "row" */
            position: relative;
        }

        .responsive td:before {
            /* Now like a table header */
            position: absolute;
        }
    }
于 2013-11-01T11:32:47.610 回答
1

我知道这不是您想要的，但我前段时间创建了一个 jsfiddle 作为参考，这可能会有所帮助：jsfiddle.net/webbymatt/MVsVj/1

基本上标记保持不变，没有 JS，内容只是按预期重排。您只需要将数据类型属性添加到表格单元格。

于 2013-11-01T10:02:44.207 回答
0

您可以内联阻止元素。我没有太多时间玩，但类似以下内容：

#content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
#content td {
    display: inline-block;
    width: 100px;
}

不过，这不是最漂亮的作品！

http://jsfiddle.net/8H3bN/

于 2013-11-01T09:12:44.547 回答