响应表,聪明的方式

Question

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

看到这个小提琴.

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

(或者,如果你想,就像这个小提琴.)

现在我的问题是,你是怎么做到的？我更喜欢CSS的方式,但到目前为止,我还没有设法只用CSS.(第二个小提琴包含rowspan属性,没有CSS等价物.)

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

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

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

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

Answer 1

您可以内联阻止元素。我玩的时间不多，但大概是这样的：

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