尽管宽度和高度固定，但从自动调整大小停止日历

Question

我想确保在重新调整浏览器大小时，我的表的宽度和高度不会自动调整大小，无论单元格中是否有内容。

我已经在全宽模式和媒体查询中修复了单元格的宽度和高度，但目前<td>带有ids #prevmonthdates，＃nextmonddates，＃currentmonthdates似乎是特别是在宽度768和1024之间重新调整大小

＆＃13;

＆＃13;

.maindiv {
	width: 1280px;
	margin: 0 auto;
}

/* LHS div */
.div_lhs_menu {
	margin: 10px 0 0 0;
	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;
}

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

	/* Vertical */
	.js-css-menu.vertical {
	  width: 100%; /* Adjust the width of the vertical menu */
	}
}

/* Generic table styling */
.overalldivcalendartable {
	margin: 20px 0 12px 20px;
	float: left;
}

.controlsdivcalendartable {
	float: left;
}

table { 
  border-collapse: collapse;
  table-layout: fixed; 
}

th { 
  background: #333; 
  color: white; 
  font-size: 20px;
  font-weight: bold; 
  padding: 6px;
  vertical-align: top;
}

td { 
  padding: 6px; 
  border: 1px solid #ccc;
  vertical-align: top;
  width: 130px;
  height: 100px;
  font-size: 20px;
}

/* Disable div to be used for media query calendar */
#divcalendartable {
	visibility: visible;
	z-index: 2;
	position: absolute;
}

#divcalendartabletwo {
	visibility: hidden;
	z-index: 1;
}

#divcalendartable, #divcalendartabletwo {
	margin-top: 20px;
}

#btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
	font-size: 35px;
 	font-weight: bold;
  	text-decoration: none;
  	vertical-align: middle;
  	cursor: pointer;
  	float: left;
  	margin-left: 20px;
  	margin-right: 20px;
  	/*background: #00FFCC;*/      
}

#monthandyearspan {
  font-size: 35px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}   

#monthandyear {
  vertical-align: middle;
  float: left;
}

.daysheader {
  background: #C0C0C0;
  height: auto;
  text-align: center;
}

#prevmonthdates, #nextmonthdates, #currentmonthdates  {
	font-size: 20px;
	font-weight: bold;
}

#prevmonthdates, #nextmonthdates {
  background-color: #E0E0E0;
}

#currentmonthdates {
  background-color: #FFFFFF;
}

/*Apply styling UL cellvaluelist*/
#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;  
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
}

/*Apply styling on all LI items in the UL cellvaluelist*/
#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
  width: 130px;
}

/*Eliminate border on last list item*/
#cellvaluelist > li:last-child {
  border: none;
  width: 130px;
}

/*Styling for the span in the main list*/
#cellvaluelist > li span {
  text-decoration: none;
  color: #000;
  display: block;
  width: 130px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

/*Shared styling for swim and chrono*/
.swim, .chrono {
    font-size: 15px;
    font-weight: normal;
    width: 130px; 
}

/*Styling for the list items in the table cells*/
.swim {
  background: #626FD1;
}

/*Hover on the 1st LI item on the list in the table cell*/
.swim:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.chrono {
    background: #EDCF47;
}

/*Hover on the 2nd LI item on the list in the table cell*/
.chrono:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

/*Hover on the last LI item on the list in the table cell*/
.couponcode:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Apply the hover on the UL coupontooltipullist*/
.couponcode:hover .coupontooltipullist {
    display: block;
}

/*UL in the tooltip*/
.coupontooltipullist {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 5px;
}

/*Shared UL and LI list properties in the tooltip*/
.coupontooltipullist, .coupontooltip_li_list {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;    
}

/*LI in the tooltip*/
.coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
    padding: 10px;
 }

/*IMG in the LI in the tooltip*/
.coupontooltipimg {
    width: 55px;
    height: 48px;
    float: left;
    padding-right: 5px;    
}

/*Span in the LI in the tooltip*/
.coupontooltiplistspan {
  float: right;
}

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

	td { 
	  width: 130px;
	  height: 100px;
	}
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
	td { 
	  width: 130px;
	  height: 100px;
	}
}

@media screen and (min-width: 1024px) and (max-width : 1224px) {
	td { 
	  width: 130px;
	  height: 100px;
	}

}

＆＃13;

	  <div class="maindiv">

        <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="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">

  	        <!-- <div id="year"></div> -->

    	      <div class="controlsdivcalendartable">
      		       <span id="btnPrevYr" title="Previous Year"><span><<</span></span>

      		       <span id="btnPrev" title="Previous Month"><span><</span></span>

      		       <!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->

      		       <!-- <div id="month"></div> -->

      			     <!-- JS targets this div -->
      			     <div id="monthandyear"></div>

      		       <!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>-->

      		       <span id="btnNext" title="Next Month"><span>></span></span>
      		        
      		       <span id="btnNextYr" title="Next Year"><span>>></span></span>      
    		    </div>

    	      <div class="clear"></div>

    	      <div id="divcalendartable"></div>

            <div id="divcalendartabletwo"></div>         
  		  </div>
  	</div>

＆＃13;

＆＃13;

＆＃13;

代码fiddle.

测试时请不要忘记全屏fiddle。

Answer 1

在CSS的fixed部分中将table-layout设置为table：

table-layout: fixed;