响应式表格，智能的方式
我有一张包含数据的表格。 表格数据。 它看起来像这样。
看到这个小提琴。
现在我想要的是，当它显示在一个较窄的屏幕上时，表格看起来像这样，所以你不会看到水平滚动条，并且它保持相同的视觉结构：
（或者如果你想，就像这个小提琴。）
现在我的问题是，你是怎么做到的？ 我更喜欢CSS的唯一方式，但到目前为止，我还没有设法在CSS中做到这一点。 （第二个小提琴包含rowspan属性，它们没有CSS等价物。）
HTML是由服务器端生成的，因此我可以根据窗口宽度生成两种布局之一，但是它不会响应窗口大小调整。
我并不反对一个小小的Javascript，但在这种情况下，要将第一个表格转换为第二个表格，需要将它拆分并逐个重建，我认为这太过于夸张。 仍在寻找可以完成所有工作的媒体查询。
试验一下，我接近了这一点，但在IE8和IE9中无法使用。
那么，有没有人有任何想法如何解决这个问题？ 理想的解决方案可以处理不同高度（2行或更多文本）和任意数量列的表格单元格。
亚作为你的HTML是一样的，你可以根据媒体查询更改css属性的样式，更好的解决方案会变成
@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;
}
}
我知道这不是你想要的，但我前段时间创建了一个jsfiddle作为参考，可能有所帮助：jsfiddle.net/webbymatt/MVsVj/1
基本上这个标记保持不变，没有JS，内容只是按照预期的那样回流。 您只需将数据类型属性添加到表格单元格。
你可以内联阻止这些元素。 我没有太多时间玩，但有如下所示：
#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/
链接地址: http://www.djcxy.com/p/16907.html