Question

我有这个媒体：

@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;
    }

}

此媒体会影响所有table元素。现在，我如何才能在我想要的桌子上使用这种媒体？

Answer 1

为您想要的表添加类或ID。例如，我将class="test"添加到您想要的表中。你的CSS就像这样

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    .test, .test thead, .test tbody, .test th, .test td, .test tr {
        display: block;
    }

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

    .test tr { border: 1px solid #ccc; }

    .test td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    .test 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;
    }

}

Answer 2

CSS3媒体规则就像CSS声明中的另一个条件。

现在，让我们假设你有一个名为＆＃39; myTable＆＃39;的表。

例如您希望为{strong>所有类型的屏幕宽度分辨率为的设备设置myTable级500px宽度为640px to 1024px在@media all and (max-width: 1024px) and (min-width: 640px) { /* This is a comment, in the selector below you're setting * a width of all tables that have myTable in their class. */ table.myTable { width: 500px; } } 之间，您就是这样做的。

If the client uses any kind of device and have their width between 640px to 1024px, apply the rule as following

因此，在上面的css语句中，您基本上是在说myTable。

或者，您只想将500px宽度设置为@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { table.myTable { width: 500px; } }，仅限于使用 iPhone处于园景位置的用户。你可能会这样做;

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)

参考：CSS Media Query Tricks

然后，让我们使用您的媒体规则作为样本。

760px

这基本上告诉我们应用

包装的CSS规则

屏幕宽度小于768px to 1024px 或的屏幕，平板电脑或智能手机，其屏幕宽度介于for totalPrice in dataArray as! [Double] { money = money + totalPrice }之间。

您可能还想阅读CSS Documentation

Answer 3

此外，如果您想进一步了解CSS this是一个很好的起点：

如何使表响应类名？

3 个答案: