提高 table 的响应能力

Question

我希望根据我创建的两个布局提高我的页面的响应速度。

下面是我的查询断点：

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

}

我的问题是纠正我在 1024 和 1224 宽度之间调整浏览器大小时遇到的问题，特别是我要查看确保我的日历 table .. 我已经解释了我自己详情见下文。

对于日历 table，您能否尝试将浏览器宽度调整为 1180px 或略低于此值（检查 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">
     <li><a href="#">SUB MENU OPTION</a></li>
     <li><a href="#">SUB MENU OPTION</a></li>
    </ul>-->
      </li>

      <li>
        <a href="#">H MENU OPTION</a>
        <!-- <ul class="hidden">
     <li><a href="#">SUB MENU OPTION</a></li>
     <li><a href="#">SUB MENU OPTION</a></li>
    </ul>-->
      </li>

      <li>
        <a href="#">H MENU OPTION</a>
        <!-- <ul class="hidden">
     <li><a href="#">SUB MENU OPTION</a></li>
     <li><a href="#">SUB MENU OPTION</a></li>
    </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>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>
          </div> -->

        </li>

        <li><a href="#">Dboard option 2</a>
          <!--<div>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>
          </div> -->
        </li>

        <li><a href="#">Dboard option 3</a>
          <!--<div>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>

            <ul>
              <li><b>Col 1</b></li>
              <li><a href="#">Sublink 1</a></li>
              <li><a href="#">Sublink 2</a></li>
              <li><a href="#">Sublink 3</a></li>
            </ul>
          </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 &copy; 2015 | qwerty Ltd | All rights reserved.</p>
  </footer>
</body>

</html>

Answer 1

最好的办法可能是在 .overalldivcalendartable 上使用宽度百分比。因此，在 table 滑到侧边菜单下方的断点处，将宽度设置为 75%。

@media screen and (max-width : 1185px) {
    .overalldivcalendartable {
        width: 75%;
    }
}

然后当其他响应功能开始发挥作用时，table 应下拉到菜单下方，然后您可以将宽度增加回 100%。

@media screen and (max-width : 1024px) {
    .overalldivcalendartable {
        width: 100%;
    }
}

请参阅 fiddle here

您还可以通过将 .div_lhs_menu 宽度设置为 25%，然后 .overalldivcalendartable 在开始（页面加载）时设置 table 和侧边菜单的宽度到 74% 这样你就不必在任意点减小宽度。

提高 table 的响应能力

Improving responsiveness of table

html

css

responsive-design