html - Improving responsiveness of table -

i'm looking improve responsiveness of page based on 2 layouts i've created.

below query breakpoints:

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

my problem right issue i'm having when resize browser between widths of 1024 , 1224 particularly @ ensure calendar table .. i've explained self in farther details below.

for calendar table effort re-sizing browser width 1180px or below value (inspect element on chrome tells browser width) .. notice calendar goes below vertical menu bar .. @ width size don't want happen .. have calendar cells cut down in size

any ideas appreciated.

here's demo:

class="snippet-code-css lang-css prettyprint-override">/* total 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; } { 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 { 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 screen , (max-width: 768px), screen , (min-width: 768px) , (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 { 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 ul of padding , list styling*/ .horizontalmenubar ul { list-style-type: none; margin: 0; padding: 0; } /*create horizontal list spacing*/ .horizontalmenubar li { display: inline-block; float: left; margin-right: 2px; width: 200px; } /*style menu links*/ .horizontalmenubar li { display: block; text-align: center; line-height: 50px; color: #000000; background: #d6d6d6; text-decoration: none; } /*hover state top level links*/ .horizontalmenubar li:hover { background: #f5f5f5; color: #3366ff; border-bottom: 1px solid #000000; } /*hide dropdown links until needed*/ .horizontalmenubar li ul { display: none; } /*make dropdown links vertical*/ .horizontalmenubar li ul li { display: block; float: none; } /* style <a> tag nested in sub-menus */ .horizontalmenubar li ul li { padding: 0 5px 0 5px; line-height: 25px; } /* style hovering of <a> tag nested in sub-menus */ .horizontalmenubar li:hover ul li { background: #d6d6d6; color: #000000; } /* style hovering of <a> tag nested in sub-menus */ .horizontalmenubar li ul li a:hover { background: #f5f5f5; color: #3366ff; } /*display dropdown on hover*/ .horizontalmenubar ul li a:hover + .hidden, .hidden:hover { display: block; } /*style 'show menu' label button , hide 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 checked*/ .horizontalmenubar input[type=checkbox]:checked ~ #menu { display: block; } /*responsive styles - horizontalmenubar */ @media screen , (max-width: 768px), screen , (min-width: 768px) , (max-width: 1024px) { /*make dropdown links appear inline*/ .horizontalmenubar ul { position: static; display: none; } /*create vertical spacing*/ .horizontalmenubar li { margin-bottom: 1px; } /*make menu links total width*/ .horizontalmenubar ul li, li { 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 { text-decoration: none; } .js-css-menu > li { display: inline-block; float: left; margin-top: 2px; background-color: #d6d6d6; } .js-css-menu > li > { color: #000000; display: block; padding: 10px 15px; } .js-css-menu > li:hover > { 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 left value according width of vertical menu */ } .js-css-menu.vertical > li div ul li:hover { background: #ffffff; color: #407d94; } .js-css-menu.vertical > li div ul li { color: #555; } /*responsive styles - .js-css-menu.vertical*/ @media screen , (max-width: 768px), screen , (min-width: 768px) , (max-width: 1024px) { /* vertical */ .js-css-menu.vertical { width: 100%; /* adjust width of 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 , table */ @media screen , (max-width: 768px), screen , (min-width: 768px) , (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"; } } class="snippet-code-html lang-html prettyprint-override"><!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>  <li><a href="#containerjoin">log out</a> </li>  <li><a href="#">help , 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">  <li><a href="#">dashboard</a>  </li> <li> <a href="#">h menu option</a>  </li> <li> <a href="#">h menu option</a>  </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>  </li> <li><a href="#">dboard alternative 2</a>  </li> <li><a href="#">dboard alternative 3</a>  </li> </ul> </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 | rights reserved.</p> </footer> </body> </html>

your best best utilize width percentages on .overalldivcalendartable. @ breakpoint table slips below side menu, set width 75%.

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

then when other responsive features kick play, , table should drop downwards below menu, can increment width 100%.

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

please see fiddle here

you have width on table , side menu set @ start (page load) setting .div_lhs_menu width 25%, , .overalldivcalendartable set 74% wouldn't have cut down width @ arbitrary point.

html css responsive-design

Search This Blog

Five

html - Improving responsiveness of table -

Comments

Post a Comment

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -