0
我有一個關於表和一些控制在底部的例子。我希望這個表格控件在屏幕很小時不可見，但我不知道它不起作用。誰能幫我？非常感謝！CSS - 媒體查詢 - 無法設置顯示：無div元素
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;
}
}
嘗試用'最小width'和'MAX-width'，而不是'分裝置用width'和'最大-device-width' – Roopendra
@Roopendra說你的代碼目前是自適應的（適應設備寬度）而不是響應（響應可用寬度）。你可以使用Chrome的開發工具>設置>覆蓋來檢查當前的代碼，並使用您選擇的分辨率啓用設備指標。一旦你理解了它的原因，然後做一下Roopendra提到的事情。 – Ming
謝謝。它的工作原理：D – PhuongTT