Question

我正在研究表的响应式css。我从这个链接http://css-tricks.com/responsive-data-tables/（如何在css上制作响应表）中阅读了一个教程。它在一些示例页面上工作，但在我的HTML页面中，我在重新调整窗口大小方面存在一些问题，并且表格没有正确响应。这是我的HTML代码：

    <style>
        /* 
Generic Styling, for Desktops/Laptops 
*/
        table
        {
            width: 100%;
            border-collapse: collapse;
        }
        /* Zebra striping */
        tr:nth-of-type(odd)
        {
            background: #eee;
        }
        th
        {
            background: #333;
            color: white;
            font-weight: bold;
        }
        td, th
        {
            padding: 6px;
            border: 1px solid #ccc;
            text-align: left;
        }
        /* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
        @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
        {
            /* Force table to not be like tables anymore */
            table, thead, tbody, th, td, tr
            {
                display: block;
            }
            /* Hide table headers (but not display: none;, for accessibility) */
            thead tr
            {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            tr
            {
                border: 1px solid #ccc;
            }
            td
            {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }
            td:before
            {
                /* Now like a table header */
                position: absolute; /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }
            /*
    Label the data
    */
            td:nth-of-type(1):before
            {
                content: "First Name";
            }
            td:nth-of-type(2):before
            {
                content: "Last Name";
            }
            td:nth-of-type(3):before
            {
                content: "Job Title";
            }
            td:nth-of-type(4):before
            {
                content: "Favorite Color";
            }
            td:nth-of-type(5):before
            {
                content: "Wars of Trek?";
            }
            td:nth-of-type(6):before
            {
                content: "Porn Name";
            }
            td:nth-of-type(7):before
            {
                content: "Date of Birth";
            }
            td:nth-of-type(8):before
            {
                content: "Dream Vacation City";
            }
            td:nth-of-type(9):before
            {
                content: "GPA";
            }
            td:nth-of-type(10):before
            {
                content: "Arbitrary Data";
            }
        }
    </style>
    <body>
        <table>
            <thead>
                <tr>
                    <th>
                        First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Job Title
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        James
                    </td>
                    <td>
                        Matman
                    </td>
                    <td>
                        Chief Sandwich Eater
                    </td>
                </tr>
                <tr>
                    <td>
                        The
                    </td>
                    <td>
                        Tick
                    </td>
                    <td>
                        Crimefighter Sorta
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

它显示了重新调整大小窗口的输出，如下图所示：

enter image description here

它在js-fiddle上运行良好，如下图所示：

enter image description here

链接：http://jsfiddle.net/Cd9Yp/

我的代码有什么问题？任何人都可以指导我，谢谢！

Answer 1

尝试在指定的视口之间定义min-width。对于父元素table和子tr，如果需要/需要。

table { 
  width: 100%; 
  min-width: 320px; // this should do it
  border-collapse: collapse; 
}

和

tr { 
   min-width: 200px; // specify if additionally needed or wanted
}

你的优化分辨率是什么 - 我看到你的@media是平板电脑，但你的拍摄明显更小 - 在大多数情况下你不应该低于320px;，所以如果你最小化在下面，它应该没关系。

另外，为什么不使用嵌套的divs？

Answer 2

这是一个小错误，我没有指定html文档类型的顶部为html5

在现有代码完美运行后

<!DOCTYPE html>

CSS响应表无法正常工作

2 个答案: