使用JQuery设置新大小不起作用

Question

我有一张大桌.screens，里面有几张小桌子。较小的表具有数据，但是这些数据中的一些应该是可选的以显示。当用户单击复选框“附加数据”时，数据应该消失，但在此之后，应调整表的大小以保持红色边界元素的纵横比（这非常重要）。我计算新的尺寸并将其设置为表格，但由于某种原因，尽管设置了新的高度，但在浏览器调试中可以看到，实际尺寸不会受到影响。有什么问题？如何更改.screensRow的大小，就像有关其他数据的行被删除一样？这是小提琴： https://jsfiddle.net/vaxobasilidze/a70ejkqm/

$('#toggleData').change(function() {
    			if(this.checked) {

    			}
    			else {
            var oldRowHeight = $('.screensRow:first-child').height();
            var minusHeight = $('.screenContainer:first-child .channelInfo').height()+$('.screenContainer:first-child .channelInfoValues').height();
            var newRowHeight = oldRowHeight-minusHeight;
            $('.channelInfo').remove();
            $('.channelInfoValues').remove();
            var rows = $('.screensRow').length;
            $('.screens').css({'height': rows*newRowHeight+'px'});
            $('.screensRow').css({'height': newRowHeight+'px'});
    			}
    		});

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
  background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #b8c0c8;
  background: rgba(0, 0, 0, 0.3);
}

#leftDiv {
  display: inline-block;
  width: 15%;
  height: 100%;
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  float: left;
  margin: 0;
  padding: 0;
  overflow: auto;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
}

#displayItems {
  min-height: auto;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  padding: 3px;
  overflow: auto;
}

#menu {
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  list-style-type: none;
}

#menu li {
  list-style: none;
  padding: 2px;
  border-radius: 4px;
  margin-top: 1px;
}

#menu li span {
  display: block;
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

#menu li ul {
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}

#menu li ul li {
  width: 100%;
  max-width: 250px;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
  margin: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  cursor: move;
}

#menu li ul li:first-child {
  margin-top: 2px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#menu li ul li:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

#settingsDiv {
  margin: 0;
  width: 100%;
  min-height: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px;
  overflow: auto;
}

#mainDiv {
  display: inline-block;
  width: 85%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin: 0;
  overflow: auto;
  padding: 3px;
}

.channel {
  min-width: 250px;
  width: auto;
  text-align: center;
  min-height: 30px;
  border: 1px solid #515151;
  border-radius: 6px;
  position: absolute;
  padding: 0;
  overflow: hidden;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
  box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border-spacing: 0px;
}

.thClass {
  min-width: 150px;
  width: 102%;
  margin-left: -3px;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  margin-top: -2px;
  min-height: 30px;
  max-height: 30px;
  line-height: 30px;
  font-size: 19px;
  cursor: move;
}

.header {
  margin-left: 17px;
}

.tableBody {
  display: block;
  min-height: 25px;
  text-align: center;
  width: 102%;
  margin-left: -2px;
  cursor: default;
}

.channel tbody tr td {
  display: block;
  line-height: 25px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#settingsDiv {
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.settings {
  float: right;
  margin-top: 3px;
  margin-right: 8px;
  cursor: pointer;
}

.add {
  display: block;
  width: 102%;
  margin-left: -3px;
  min-height: 20px;
}

.addList {
  width: 100px;
  cursor: pointer;
}

.addList:hover {
  text-decoration: underline;
  color: antiquewhite;
}

.draggableItems {
  max-height: 150px;
  overflow-y: auto !important;
}

#displaySizes {
  list-style: none;
  padding: 0;
  margin-top: 0;
  max-width: 100px;
}

.disp tbody tr th {
  column-span: all;
}

.disp tbody tr td {
  display: table-cell;
}

.ui-resizable {
  position: absolute !important;
  width: 250px;
}

#mainDiv .container {
  width: 300px;
  height: 200px;
}

#mainContainer {
  width: 1926px;
  height: 1086px;
}

#dispInfo {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.videoDropped {
  width: 300px;
  height: 300px;
}

.screens {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
}

.channels {
  border-spacing: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-weight: bold;
  border: 1px solid rgba(30, 30, 30, 1);
  border-radius: 4px;
  overflow: hidden;
}

.channels td {
  border-left: 1px solid rgba(30, 30, 30, 1);
}

.channels td:first-child {
  border-left: none;
}

.channelHeader {
  height: 7%;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
}

.audioVideo {
  height: 79%;
}

.channelInfo {
  height: 7%;
  max-height: 7%;
  text-align: center;
  border-bottom: 1px solid rgba(30, 30, 30, 1);
  border-top: 1px solid rgba(30, 30, 30, 1);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
}

.channelInfo td {
  border-radius: 2px 2px 0 0;
}

.channelInfoValues {
  height: 7%;
  max-height: 7%;
  text-align: center;
}

/*Audio styling*/

.sound {
  padding: 0;
  margin: 0;
}

.audiodb {
  width: 100%;
  height: 100%;
  position: relative;
}

.levels {
  position: absolute;
  width: 40%;
  margin-left: 17%;
  top: 5%;
  height: 1px;
  left: 30%;
  background: silver;
  z-index: 300;
}

.level1 {
  top: 13%;
}

.level2 {
  top: 20%;
}

.level3 {
  top: 30%;
}

.level4 {
  top: 45%;
}

.level5 {
  top: 61%;
}

.level6 {
  top: 78%;
}

.level7 {
  top: 95%;
}

.audioBackground {
  width: 15%;
  height: 90%;
  left: 53%;
  position: absolute;
  top: 5%;
  background: #ff0000;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmFmZjAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjMDBmZjJhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmQxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff0000), color-stop(7%, #ff0000), color-stop(20%, #faff00), color-stop(38%, #00ff2a), color-stop(100%, #006d10));
  background: -webkit-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%);
  background: -o-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%);
  background: -ms-linear-gradient(top, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%);
  background: linear-gradient(to bottom, #ff0000 0%, #ff0000 7%, #faff00 20%, #00ff2a 38%, #006d10 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#006d10', GradientType=0);
  overflow: hidden;
}

.audioRight {
  left: 71%;
}

.audioCover {
  width: 200%;
  height: 30%;
  background: grey;
  margin-left: -5px;
}

.audioNumbers {
  width: 30%;
  height: 100%;
  text-align: center;
  position: absolute;
}

.db {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 15%;
}

.db p {
  margin-top: -5px;
}

.max {
  top: 5%;
}

.high {
  top: 15%;
}

.normal {
  top: 35%;
}

.low {
  top: 95%;
}

.placeHolder {
  width: 100%;
  height: 100%;
  margin: auto;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
  <div id="leftDiv">
      <input type="checkbox" id="toggleData" name="toggleData" value="toggleData" checked>
      <label for="toggleData">Additional data</label>
  </div>
  
  <div id="mainDiv">
    <div id="mainContainer" style="width: 1920px; height: 1080px;">
      <table class="screens" style="height: 100%; width: 1705.05px; position: relative; left: -2px; top: -2px;">
        <tbody>
          <tr class="screensRow">
            <td class="screenContainer" style="min-width: 850px; height: 538px;">
              <table class="channels" style="width: 850px; height: 538px; font-size: 13px; max-width: 1920px; max-height: 1080px; position: relative;" oncontextmenu="return false;">
                <tbody>
                  <tr class="channelHeader">
                    <td colspan="5" class="channelName" id="channel1">National_Geographic</td>
                    <td colspan="2" class="channelNumber">1</td>
                  </tr>
                  <tr class="audioVideo">
                    <td colspan="5" class="vid">
                      <div class="placeHolder wideHolder" style="float: left;"></div>
                    </td>
                    <td colspan="2" class="sound">
                      <div class="audiodb">
                        <div class="audioNumbers">
                          <div class="db max level0">
                            <p style="margin-top: -6.5px;">0</p><span class="levels"></span></div>
                          <div class="db high level1">
                            <p style="margin-top: -6.5px;">-6</p><span class="levels"></span></div>
                          <div class="db level2">
                            <p style="margin-top: -6.5px;">-12</p><span class="levels"></span></div>
                          <div class="db normal level3">
                            <p style="margin-top: -6.5px;">-20</p><span class="levels"></span></div>
                          <div class="db level4">
                            <p style="margin-top: -6.5px;">-30</p><span class="levels"></span></div>
                          <div class="db level5">
                            <p style="margin-top: -6.5px;">-40</p><span class="levels"></span></div>
                          <div class="db level6">
                            <p style="margin-top: -6.5px;">-50</p><span class="levels"></span></div>
                          <div class="db low level7">
                            <p style="margin-top: -6.5px;">-60</p><span class="levels"></span></div>
                          <div class="db dbRuler">dB</div>
                        </div>
                        <div class="audioBackground audioLeft">
                          <div class="audioCover" style="height: 8%;"></div>
                        </div>
                        <div class="audioBackground audioRight">
                          <div class="audioCover" style="height: 8%;"></div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="channelInfo">
                    <td class="resolution">Resolution</td>
                    <td class="aspect">Aspect</td>
                    <td class="fps">FPS</td>
                    <td class="vformat">V-Format</td>
                    <td class="aformat">A-Format</td>
                    <td class="leftBar">L</td>
                    <td class="rightBar">R</td>
                  </tr>
                  <tr class="channelInfoValues">
                    <td class="resolValue">720x576</td>
                    <td class="aspectValue">20:11</td>
                    <td class="fpsValue">25</td>
                    <td class="vformatValue">HEVC</td>
                    <td class="aformatValue">MP2</td>
                    <td class="leftBarValue">---</td>
                    <td class="rightBarValue">---</td>
                  </tr>
                </tbody>
                <div class="resize-sensor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                  <div class="resize-sensor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                    <div style="position: absolute; left: 0px; top: 0px; transition: 0s; width: 100000px; height: 100000px;"></div>
                  </div>
                  <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                    <div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%"></div>
                  </div>
                </div>
              </table>
            </td>
            <td class="screenContainer" style="min-width: 850px; height: 538px;"></td>
          </tr>
          <tr class="screensRow">
            <td class="screenContainer" style="min-width: 850px; height: 538px;">
              <table class="channels" style="width: 850px; height: 538px; font-size: 13px; max-width: 1920px; max-height: 1080px; position: relative;" oncontextmenu="return false;">
                <tbody class="">
                  <tr class="channelHeader">
                    <td colspan="5" class="channelName" id="channel3">Nauka_2</td>
                    <td colspan="2" class="channelNumber">3</td>
                  </tr>
                  <tr class="audioVideo">
                    <td colspan="5" class="vid">
                      <div class="placeHolder wideHolder" style="float: left;"></div>
                    </td>
                    <td colspan="2" class="sound">
                      <div class="audiodb">
                        <div class="audioNumbers">
                          <div class="db max level0">
                            <p style="margin-top: -6.5px;">0</p><span class="levels"></span></div>
                          <div class="db high level1">
                            <p style="margin-top: -6.5px;">-6</p><span class="levels"></span></div>
                          <div class="db level2">
                            <p style="margin-top: -6.5px;">-12</p><span class="levels"></span></div>
                          <div class="db normal level3">
                            <p style="margin-top: -6.5px;">-20</p><span class="levels"></span></div>
                          <div class="db level4">
                            <p style="margin-top: -6.5px;">-30</p><span class="levels"></span></div>
                          <div class="db level5">
                            <p style="margin-top: -6.5px;">-40</p><span class="levels"></span></div>
                          <div class="db level6">
                            <p style="margin-top: -6.5px;">-50</p><span class="levels"></span></div>
                          <div class="db low level7">
                            <p style="margin-top: -6.5px;">-60</p><span class="levels"></span></div>
                          <div class="db dbRuler">dB</div>
                        </div>
                        <div class="audioBackground audioLeft">
                          <div class="audioCover" style="height: 8%;"></div>
                        </div>
                        <div class="audioBackground audioRight">
                          <div class="audioCover" style="height: 8%;"></div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="channelInfo">
                    <td class="resolution">Resolution</td>
                    <td class="aspect">Aspect</td>
                    <td class="fps">FPS</td>
                    <td class="vformat">V-Format</td>
                    <td class="aformat">A-Format</td>
                    <td class="leftBar">L</td>
                    <td class="rightBar">R</td>
                  </tr>
                  <tr class="channelInfoValues">
                    <td class="resolValue">720x576</td>
                    <td class="aspectValue">20:11</td>
                    <td class="fpsValue">25</td>
                    <td class="vformatValue">HEVC</td>
                    <td class="aformatValue">MP2</td>
                    <td class="leftBarValue">---</td>
                    <td class="rightBarValue">---</td>
                  </tr>
                </tbody>
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                  <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                    <div style="position: absolute; left: 0px; top: 0px; transition: 0s; width: 100000px; height: 100000px;"></div>
                  </div>
                  <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                    <div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%"></div>
                  </div>
                </div>
              </table>
            </td>
            <td class="screenContainer" style="min-width: 850px; height: 538px;"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>