Question

我有一个关于表的示例和底部的一些控件。我希望这个表控件在屏幕很小时是不可见的，但我不知道它不起作用。谁能帮我？非常感谢！

HTML文件

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>Responsive Table</title>

    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <link rel='stylesheet' href='css/style.css'>

</head>

<body>

    <div id='table-wrap'>    
        <table id='CategoryCMS'>
            <thead>
            <tr>
                <th>Category Name</th>
                <th>Category Image</th>
                <th>Category State</th>
                <th>Category Description</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>James</td>
                <td>Matman</td>
                <td>Chief Sandwich Eater</td>
                <td>Lettuce Green</td>
                <td><img src='img/edit.jpg'/><img src='img/delete.png'/></td>
            </tr>
            <tr>
              <td>The</td>
              <td>Tick</td>
              <td>Crimefighter Sorta</td>
              <td>Blue</td>      
              <td><img src='img/edit.jpg'/><img src='img/delete.png'/></td>
            </tr>
            <tr>
              <td>Jokey</td>
              <td>Smurf</td>
              <td>Giving Exploding Presents</td>
              <td>Smurflow</td>      
              <td><img src='img/edit.jpg'/><img src='img/delete.png'/></td>
            </tr>
            <tr>
              <td>Cindy</td>
              <td>Beyler</td>
              <td>Sales Representative</td>
              <td>Red</td>  
              <td><img src='img/edit.jpg'/><img src='img/delete.png'/></td>
            </tr>
            <tr>
              <td>Captain</td>
              <td>Cool</td>
              <td>Tree Crusher</td>
              <td>Blue</td>
              <td><img src='img/edit.jpg'/><img src='img/delete.png'/></td>
            </tr>
            <tr>
              <td><input style='width: 100%;' type='text'/></td>
              <td><input style='width: 100%;' type='text'/></td>
              <td><input style='width: 100%;' type='text'/></td>
              <td><input style='width: 100%;' type='text'/></td>
              <td><button style='width: 100%;'>Add</button></td>
            </tr>
            </tbody>
        </table>
        <div id='table-control-wrap'>
            <div id='table-control'>
                <img id='last' src='img/last.png' alt=''/>
                <img id='next' src='img/next.png' alt=''/>

                <div id='page-control'>
                    <input id='current-page' type='text' value="1"/>
                    <span>/</span>
                    <span id='total-page'>50</span>
                </div>          

                <img id='prev' src='img/prev.png' alt=''/>          
                <img id='first' src='img/first.png' alt=''/>                
            </div>
        </div>
    </div>

</body>

</html>

CSS文件

* { 
    margin: 0; 
    padding: 0; 
}
body { 
    font: 14px/1.4 Georgia, Serif; 
}
#page-wrap {
    margin: 50px;
}
p {
    margin: 20px 0; 
}

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

    tbody tr:hover td
    {
    background: #ccc;
    color: #339;
    }

    #CategoryCMS img {          
            width: 30px;
            height: 30px;
            padding-left: 10px;
            cursor: pointer;
        }
        #CategoryCMS img:hover {
            background-color: #eee;
        }

        #CategoryCMS button {
            text-align: center;
            height: 30px;
            cursor: pointer;
        }

    #table-control-wrap {
        width: 100%;
    }

    #table-control {
        float:right;            
        height: 50px;
        margin-right: 30px;
    }

    #table-control img, #table-control #next, #table-control #prev, #page-control {
            display:block;
            float: right;
    }

        #table-control img {
            padding: 10px 0 0 0;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }

        #table-control img:hover {
            opacity:0.4;
            filter:alpha(opacity=40);
        }

        #table-control #next, #table-control #prev{
            width: 40px;
            height: 40px;
            padding: 15px 8px 0 8px;
        }

        #table-control input {
            text-align: center;
            width: 30px;
            color: #000;
            font: 16px/1.4 Georgia, Serif; 
        }

        #page-control { 
            height: 50px;
            margin: 0;
            padding: 20px 0 0 0;
        }

        #table-control span {
            display:inline-block;
        }

/* 
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
    @media 
    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: "Category Name"; }
        td:nth-of-type(2):before { content: "Category Image"; }
        td:nth-of-type(3):before { content: "Category State"; }
        td:nth-of-type(4):before { content: "Category Description"; }
    }   

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body { 
            padding: 0; 
            margin: 0; 
            width: 320px; 
            }
        #table-control {
            display: none !important;
            visibility: hidden;
        }   
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body { 
            width: 495px; 
        }
        #table-control{
            display: none !important;
            visibility: hidden;
        }   
    }

Answer 1

使用这些代码代替您的代码：

 @media only screen and (min-width : 320px) and (max-width : 480px) {
    body { 
        padding: 0; 
        margin: 0; 
        width: 320px; 
        }
    #table-control {
        display: none !important;
        visibility: hidden;
    }   
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body { 
        width: 495px; 
    }
    #table-control{
        display: none !important;
        visibility: hidden;
    }   
}

Answer 2

在媒体查询中尝试使用min-width和max-width代替min-device-width和max-device-width。

您还可以参考以下链接： -

http://cssmediaqueries.com/what-are-css-media-queries.html

http://css-tricks.com/css-media-queries/

Answer 3

尝试在HTML中替换此行

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

这一行：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

我在使用第一个Meta时遇到了一些错误..但是当它被替换时一切都很好

CSS - 媒体查询 - 无法为div元素设置display：none

3 个答案: