响应表，聪明的方法响应表，聪明的方法(Responsive tables, the smart wa

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

见这个小提琴。

现在我想，当它显示一个较窄的屏幕上，为表看起来像这样，让你没有得到一个水平滚动条，并保持相同的视觉结构：

（或者，如果你想，像这样的小提琴。）

现在的问题是，你怎么做呢？我宁愿一个CSS唯一途径，但到目前为止，我还没有成功地做到这一点只在CSS。（第二个小提琴包含rowspan属性，其不具有CSS当量。）

该HTML 生成的服务器端，所以我可以生成依赖于窗口宽度两种布局之一，但那就不是一个窗口大小调整做出反应。

我并不反对一些JavaScript，但在这种情况下，第一个表转换成一个窗口大小调整第二，它需要由电池拆开和重建，细胞，而且我认为这是矫枉过正。还在寻找一个媒体查询，可以做所有的工作。

试验了一下，我来到这个靠近，但并不在IE8和IE9工作。

因此，没有任何人有任何想法如何解决呢？理想的解决办法上变化的高度（2行文字或更多的）表细胞和任意数量的列工作。

Answer 1:

雅作为你的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到内容2

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

Answer 2:

我知道这是不是正是你想要什么，但我创建了一个的jsfiddle前一段时间作为参考这可能有助于：jsfiddle.net/webbymatt/MVsVj/1

本质上的标记是一样的，没有JS和内容只重排预期。你只需要对数据类型属性添加到表格单元格。

Answer 3:

你可以直插块的元素。我没有太多的时间玩，但是像下面这样：

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

Answer 4:

检查此CodePen 。

我在css-tricks.com发现这个解决方案很久以前。

该表变得有点凌乱：

<table>
    <tr>
        <td>
            Description 1
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="text-center">Data 1A</td>
                        <td class="text-center">Data 1B</td>
                        <td class="text-center">Data 1C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
    <tr>
        <td>
            Description 2
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Data 2A</td>
                        <td>Data 2B</td>
                        <td>Data 2C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
</table>

这是CSS：

    /* Small display targeting */
    @media only screen and (max-width: 767px) {
        /* Force table to not be like tables anymore */
        .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        .responsive thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .responsive td {
            /* Behave  like a "row" */
            position: relative;
        }

        .responsive td:before {
            /* Now like a table header */
            position: absolute;
        }
    }

文章来源: Responsive tables, the smart way