1
我期望根據我創建的兩個佈局來提高我的頁面的響應能力。提高表格的響應度
下面是我的查詢斷點：
@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px) {
}
我的問題是糾正我有這個問題，當我調整我的1024和1224之間的寬度特別是瀏覽器與我是看在確保我的日曆表..我已經在下面更詳細地解釋了我的自我。
對於日曆表，您可以嘗試將瀏覽器寬度重新設置爲1180像素或稍低於此值（檢查Chrome上的元素會告訴您瀏覽器寬度）。您會注意到日曆會在垂直菜單欄下方顯示。在這個寬度的大小，我不希望這種情況發生..我想日曆單元格的大小減少
任何想法，讚賞。
這裏是我的演示：
/* Full width styling */
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #363636;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
}
h1 {
text-align: center;
font-size: 100%;
line-height: 120%;
padding: 5% 0 5% 0;
}
h2 {
line-height: 280%;
padding-left: 3%;
text-decoration: underline;
}
h3 {
line-height: 120%;
padding: 5% 0 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #FFFFFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
header {
background-color: #3366FF;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90%;
}
#logo {
margin: 0px;
float: left;
width: 200px;
height: 86px;
background: url("../images/logo.png") no-repeat center;
}
nav {
float: right;
padding: 25px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 100px;
height: 86px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
padding: 0;
margin: 0;
}
a:hover#menu-icon {
border-radius: 2px 2px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
nav ul li a:hover {
color: #363636;
text-decoration: none;
}
section {
width: 29%;
float: left;
margin: 2% 2% 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
#genericlinkdecoration {
color: #3366FF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
footer {
background-color: #808080;
width: 100%;
overflow: hidden;
}
footer p,
footer h3 {
color: #FFFFFF;
}
footer p a {
color: #FFFFFF;
text-decoration: none;
font-weight: normal;
font-size: 14px;
}
ul.social li {
display: inline;
}
ul.social img {
height: 50px;
}
footer.footerTwo {
border-top: 1px solid #4D4350;
background-color: #3366FF;
text-align: center;
}
/* Media queries */
@media only screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
body {
position: absolute;
}
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
background: #FFFFFF;
border: 1px solid #D6D6D6;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px;
}
nav:hover ul {
display: block;
}
nav ul li a {
color: #363636;
text-decoration: none;
}
nav ul li a:hover {
color: #3366FF;
text-decoration: none;
}
nav li {
width: 100%;
margin: 0;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
.horizontalmenubar {
margin-top: 86px;
background: #33DD00;
}
/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*Create a horizontal list with spacing*/
.horizontalmenubar li {
display: inline-block;
float: left;
margin-right: 2px;
width: 200px;
}
/*Style for menu links*/
.horizontalmenubar li a {
display: block;
text-align: center;
line-height: 50px;
color: #000000;
background: #D6D6D6;
text-decoration: none;
}
/*Hover state for top level links*/
.horizontalmenubar li:hover a {
background: #F5F5F5;
color: #3366FF;
border-bottom: 1px solid #000000;
}
/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
display: none;
}
/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
display: block;
float: none;
}
/* Style the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a {
padding: 0 5px 0 5px;
line-height: 25px;
}
/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li:hover ul li a {
background: #D6D6D6;
color: #000000;
}
/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a:hover {
background: #F5F5F5;
color: #3366FF;
}
/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000000;
background: #D6D6D6;
text-align: center;
padding: 10px 0;
display: none;
font-weight: bold;
font-size: 20px;
}
/*Hide checkbox*/
.horizontalmenubar input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles - horizontalmenubar */
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
/*Make dropdown links appear inline*/
.horizontalmenubar ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.horizontalmenubar li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.horizontalmenubar ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
.maindiv {
width: 100%;
background: #FFCC00;
}
/* LHS div */
.div_lhs_menu {
margin: 10px 0 0 10px;
float: left;
}
/* Main menu */
.js-css-menu {
display: inline-block;
}
.js-css-menu,
.js-css-menu ul,
.js-css-menu li {
list-style: none;
padding: 0;
margin: 0;
}
.js-css-menu a {
text-decoration: none;
}
.js-css-menu > li {
display: inline-block;
float: left;
margin-top: 2px;
background-color: #D6D6D6;
}
.js-css-menu > li > a {
color: #000000;
display: block;
padding: 10px 15px;
}
.js-css-menu > li:hover > a {
background: #F5F5F5;
color: #3366FF;
}
/* Dropdown */
.js-css-menu > li div {
position: absolute;
display: none;
background: #D6D6D6;
}
.js-css-menu > li:hover div {
display: block;
}
.js-css-menu > li div ul {
float: none;
}
.js-css-menu > li div ul li {
padding: 10px 15px;
margin-bottom: 2px;
}
.js-css-menu > li div ul li:hover {
background: #FFFFFF;
color: #407D94;
}
.js-css-menu.vertical > li {
display: block;
float: none;
position: relative;
}
.js-css-menu.vertical > li div {
width: 150px;
top: 0;
left: 181px;
/* Adjust the left value according to the width of the vertical menu */
}
.js-css-menu.vertical > li div ul li:hover {
background: #FFFFFF;
color: #407D94;
}
.js-css-menu.vertical > li div ul li a {
color: #555;
}
/*Responsive Styles - .js-css-menu.vertical*/
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
/* Vertical */
.js-css-menu.vertical {
width: 100%;
/* Adjust the width of the vertical menu */
}
}
/* Generic table styling */
.overalldivcalendartable {
margin-top: 12px;
margin-left: 10px;
float: left;
}
table {
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-size: 20px;
font-weight: bold;
padding: 6px;
vertical-align: top;
}
th:nth-of-type(1):before {
content: "Mon";
}
th:nth-of-type(2):before {
content: "Tue";
}
th:nth-of-type(3):before {
content: "Wed";
}
th:nth-of-type(4):before {
content: "Thu";
}
th:nth-of-type(5):before {
content: "Fri";
}
th:nth-of-type(6):before {
content: "Sat";
}
th:nth-of-type(7):before {
content: "Sun";
}
td {
padding: 6px;
border: 1px solid #ccc;
vertical-align: top;
width: 125px;
height: 100px;
}
/*Responsive Styles - div_lhs_menu and table */
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
.div_lhs_menu {
margin-left: 0;
width: 100%;
}
.overalldivcalendartable {
clear: both;
margin-top: 10px;
margin-left: 0px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
th:nth-of-type(1):before {
content: "M";
}
th:nth-of-type(2):before {
content: "T";
}
th:nth-of-type(3):before {
content: "W";
}
th:nth-of-type(4):before {
content: "T";
}
th:nth-of-type(5):before {
content: "F";
}
th:nth-of-type(6):before {
content: "S";
}
th:nth-of-type(7):before {
content: "S";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>QWERTY</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheets/blueberryresponsive.css">
<link rel="stylesheet" type="text/css" href="stylesheets/dashboardresponsive.css">
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#containerjoin">My Profile</a>
</li>
<!-- class="current" -->
<li><a href="#containerjoin">Log Out</a>
</li>
<!-- class="current" -->
<li><a href="#">Help and FAQs</a>
</li>
<li><a href="#contactus">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div class="clear"></div>
<div class="horizontalmenubar">
<label for="show-menu" class="show-menu">MAIN MENU</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<!-- removed id="menu" -->
<li><a href="#">Dashboard</a>
<!-- <ul class="hidden">
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t </ul>-->
</li>
<li>
<a href="#">H MENU OPTION</a>
<!-- <ul class="hidden">
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t </ul>-->
</li>
<li>
<a href="#">H MENU OPTION</a>
<!-- <ul class="hidden">
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t \t <li><a href="#">SUB MENU OPTION</a></li>
\t \t \t \t </ul>-->
</li>
<li><a href="#">H MENU OPTION</a>
</li>
<li><a href="#">H MENU OPTION</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="maindiv">
<div class="div_lhs_menu">
<ul class="js-css-menu responsive vertical">
<li><a href="#overalldivcalendartable">Calendar</a>
<!--<div>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t </div> -->
</li>
<li><a href="#">Dboard option 2</a>
<!--<div>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t </div> -->
</li>
<li><a href="#">Dboard option 3</a>
<!--<div>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t <ul>
\t \t <li><b>Col 1</b></li>
\t \t <li><a href="#">Sublink 1</a></li>
\t \t <li><a href="#">Sublink 2</a></li>
\t \t <li><a href="#">Sublink 3</a></li>
\t \t </ul>
\t \t </div> -->
</li>
</ul>
</div>
<!-- JS targets this div -->
<div class="overalldivcalendartable">
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="selected">17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
<footer id="footer">
<section>
<h3>ABOUT US:</h3>
<p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>
</p>
</section>
<section>
<h3>LIKE, FOLLOW OR WATCH US:</h3>
<ul class="social">
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/facebook.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/youtube.png" />
</a>
</li>
</ul>
</section>
<section id="contactus">
<h3>CONTACT US:</h3>
<p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>
<br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b>
<br>
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>
</section>
</footer>
<footer class="footerTwo">
<p>Copyright © 2015 | qwerty Ltd | All rights reserved.</p>
</footer>
</body>
</html>
表格本質上沒有反應。即使限制它們的寬度也取決於它們的內容。 [響應數據表]（https://css-tricks.com/responsive-data-tables/）會向您展示他們的一些想法，但在移動響應設計中嘗試使用表格會很糟糕。它需要準確計劃哪些數據應該在移動視圖中顯示（如果有的話）。除非絕對必要，否則我的基本去除是不顯示它。 –