响应表，聪明的方式 [英] Responsive tables, the smart way

问题描述

我有一个包含数据的表。表格数据。

请参阅。）

现在我的问题是，你怎么做？我更喜欢CSS的方式，但到目前为止，我还没有设法做到这一点在CSS。 （第二个小调包含 rowspan 属性，它们没有CSS等效项。）

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

我不反对一个小Javascript，但在这种情况下，要翻译第一个表到第二个窗口调整大小，它需要被拆分和重建，逐个单元格，我认为这是超杀。仍在寻找可以完成所有工作的媒体查询。

尝试一下，我来了关闭，但是在IE8和IE9中不起作用。

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

解决方案

ya因为你的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;内容：''; 
 height：0; 
 border-bottom：1px solid; 
} 
 
} 
  

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

这里是小提示

将小表ID更改为content2

  @media只有屏幕和（max-width：768px）{
 #content {
 display：none！important; 
} 
} 
 @media only screen and（min-width：769px）{
＃content2 {
 display：none！important; 
} 
} 
  

I've got a table that contains data. Tabular data. And it looks like this.

See this fiddle.

Now what I'd like is, when it's displayed on a narrower screen, for the table to look like this, so that you don't get a horizontal scroll bar and it keeps the same visual structure:

(or if you want, like this fiddle.)

Now my question is, how do you do that? I'd prefer a CSS only way, but so far, I haven't managed to do that in only CSS. (The second fiddle contains rowspan attributes, which don't have CSS equivalents.)

The HTML is generated server side, so I could generate one of the two layouts depending on the window width, but then it wouldn't respond to a window resize.

I'm not against a little Javascript, but in this case, to translate the first table into the second on a window resize, it would need to be taken apart and rebuilt, cell by cell, and I think that's overkill. Still looking for a media query that can do all the work.

Experimenting a bit, I came this close, but that doesn't work in IE8 and IE9.

So, does anybody have any ideas how to tackle this? The ideal solution would work on table cells of varying height (2 lines of text or more) and any number of columns.

解决方案

ya as your html is same you can change the styles for the css properties according to the media query a better solution would be- 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;
}

}

one possible solution is to use media queries an hide the respective blocks or change styles accordingly

here is a fiddle
changed smaller table id to content2

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

这篇关于响应表，聪明的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！