Html 灵敏的桌子，聪明的方式

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

看

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

（或者，如果你愿意，比如说。）

现在我的问题是，你是怎么做到的？我更喜欢只使用CSS的方式，但到目前为止，我还没有做到只用CSS。（第二部分包含

rowspan

属性，这些属性没有CSS等价物。）

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

我不反对使用一点Javascript，但在本例中，要在调整窗口大小时将第一个表转换为第二个表，需要逐个单元格地拆分和重建，我认为这是过分的。仍在寻找可以完成所有工作的媒体查询

我做了一点实验，但在IE8和IE9中不起作用

---

那么，有人知道如何解决这个问题吗？理想的解决方案是在不同高度（2行或更多文本）的表格单元格和任意数量的列上工作。

您可以内联块元素。我没有太多的时间玩，但有以下几点：

#内容{
边框：1px实心；
边界塌陷：塌陷；
}
#内容td，#内容th{
边框：1px实心；
文本对齐：左对齐；
填料：07em.2em；
空白：nowrap；
字体大小：400；
}
#内容td{
显示：内联块；
宽度：100px；
}

不过，这不是最漂亮的作品

---

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

一种可能的解决方案是使用媒体查询隐藏相应的块 或者相应地改变风格

这是一个
将较小的表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，内容只是按照预期回流。您只需要将数据类型属性添加到表格单元格中。

选中此项

我很久以前在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>

---

谢谢你的帮助。但我担心这个在IE9中也不起作用。啊！好-值得一试（不幸的是，我无法在IE9上测试）。我们最近确实遇到了一个类似的问题，并发现向头添加

，但这是IE8。在搜索之后，这里有一些关于的信息。关于这个主题：尝试在td中添加一个div，这也适用于ie。这肯定是一种可能性，所以考虑一下+1。我会继续寻找一种方法，不需要发送两次相同的数据。我的答案是：这样你就不必使用html twise，只需添加两次css类，不同的屏幕大小会有所不同。

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

    /* 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;
        }
    }