响应式表格，智能方式 [英] Responsive tables, the smart way

问题描述

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

参见.)

现在我的问题是，你是怎么做到的?我更喜欢只使用 CSS 的方式，但到目前为止，我还没有设法只使用 CSS 来做到这一点.(第二个小提琴包含 rowspan 属性，这些属性没有 CSS 等效项.)

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

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

尝试了一下，我来到这个关闭，但这在IE8 和 IE9.

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

解决方案

ya 由于您的 html 相同，您可以根据媒体查询更改 css 属性的样式，更好的解决方案是-小提琴

@media only screen and (min-width: 769px) {#内容 {边框:1px 实心；边框折叠:折叠；}#content td, #content th {边框:1px 实心；文本对齐:左；填充:.07em .2em;空白:nowrap;字体粗细:400；}}@media only screen and (max-width: 768px) {#内容 {边框:1px 实心；边框折叠:折叠；}#内容tr {高度:4em；边框底部:1px 实心；}#content th {边框:1px 实心；文本对齐:左；填充:.07em .2em;空白:nowrap;字体粗细:400；高度:4em；}#content td {填充:.07em .2em;空白:nowrap;高度:1.4em；显示:内联；}#content td:not(:last-child)::after {显示:块；内容:'';高度:0；边框底部:1px 实心；}}

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

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

@media only screen and (max-width: 768px) {#内容{显示:无！重要；}}@media only screen and (min-width: 769px) {#内容2{显示:无！重要；}}

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屋！