响应式表格，智能方式

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

See 这把小提琴 http://jsfiddle.net/MrLister/c54RN/.

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

（或者如果你愿意的话，比如这把小提琴 http://jsfiddle.net/MrLister/c54RN/2/.)

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

超文本标记语言is生成的服务器端，因此我可以根据窗口宽度生成两种布局之一，但随后它不会响应窗口大小调整。

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

尝试了一下，我来了这么近 http://jsfiddle.net/MrLister/c54RN/2/，但这在 IE8 和 IE9 中不起作用。

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

是的，因为您的 html 是相同的，您可以根据媒体查询更改 css 属性的样式，更好的解决方案是-fiddle http://jsfiddle.net/sudheer105/45kbc/

@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;
}

}

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

这里有一个fiddle http://jsfiddle.net/sudheer105/WC22Q/
将较小的表 id 更改为 content2

@media only screen and (max-width: 768px) {
    #content{
        display:none !important;
    }
}
@media only screen and (min-width: 769px) {
    #content2{
        display:none !important;
    }
}