CSS - consulta de medios - No se puede configurar la visualización: ninguno para el elemento div

I have an example about table and some control at the bottom. I want this table control is invisible when screen is small but i don't know it's not working. Can anyone help me? Thanks a lot!

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

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

preguntado el 27 de noviembre de 13 a las 06:11

prueba con min-width y max-width en lugar de min-device-width y max-device-width -

@Roopendra is saying that your code currently is adaptive (adapting to the device's width) rather than responsive (responding to the available width.) You can check your current code by using Chrome's Developer Tools > Settings > Overrides, and enable the Device metrics with your resolution of choice. Once you understand the el porqué of it, then do what Roopendra mentions. -

3 Respuestas

Use these code instead of yours:

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

respondido 27 nov., 13:06

You are welcome. Mark the answer as accepted answer which works for you. Thanks. - Explorar

Prueba con min-width y max-width en lugar de min-device-width y max-device-width in media query.

You can also refer below link:-

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

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

respondido 27 nov., 13:06

Try to replace this line in HTML

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

con esta línea:

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

I experienced some bugs when using first Meta.. But everything was well when it was replaced

respondido 27 nov., 13:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.