Table's gets wider if I set its content width in pixels

Question

I have a big table which contains many smaller tables in it. I need to put some content in these small tables, but when I do, some of the td's change its sizes, making others too narrow. Here is the fiddle:

https://jsfiddle.net/vaxobasilidze/jwvzpt62/14/

Content I need to put in tables, is a div .placeHolder, it has a red border. Problem occurs when I set width of .placeHolder in pixels as you can see. If the width is 100%, it works as it should. How do I fix this? Setting min-width did not help. In first table width is 100%, everything is ok, but in second table width is set in pixels. Despite there is enough place in pixels, .placeHolder still makes its parent td wider and messes up the audio block.

for(var i=1; i<=3; i++){
	var blockId = "channel"+i;
	var aspect = "16:9";
  var aspX = parseInt(aspect.split(':')[0]);
  var aspY = parseInt(aspect.split(':')[1]);
  var width = $('#'+blockId).closest('.channels').find('.vid').width();
  var height = $('#'+blockId).closest('.channels').find('.vid').height();
  var test = (width/aspX)*aspY;
  var test2 = (height/aspY)*aspX;
  if(test <= height){
    $('#'+blockId).closest('.channels').find('.placeHolder').css({'height': test+'px'});
  }
  else {
    $('#'+blockId).closest('.channels').find('.placeHolder').css({'width': test2+'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;
    /*resize: vertical;*/
    overflow: auto;
}

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

#menu li {
    background: url(images/comment-bg3.png) repeat;
    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;
    background: url(images/comment-bg2.png) repeat;
    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 {
    background: url(images/comment-bg3.png) repeat;
    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;
    background: url(images/comment-bg3.png) repeat;
    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;
    background: url(images/comment-bg2.png) repeat;
    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;
    background: url(images/comment-rowsubmit.png) repeat-x;
    min-height: 20px;
}

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

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

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

.draggableItems::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
    background: url(images/comment-bg.png) repeat;
    border: 1px solid #ccc;
}

.draggableItems::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: url(images/comment-bg3.png) repeat;
    border: 1px solid #aaa;
}

.draggableItems::-webkit-scrollbar-thumb:hover {
    background: url(images/bg-tabs.png) repeat;
}

.draggableItems::-webkit-scrollbar-thumb:active {
    background: linear-gradient(left, #22ADD4, #1E98BA);
}

#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;
  background: url(images/comment-bg2.png);
}

.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;
  background: url(images/comment-bg3.png) repeat;
}

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

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

.channelHeader {
  height: 7%;
  text-align: center;
  background: url(images/comment-bg2.png) repeat;
  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;
  background: url(images/comment-bg2.png) repeat;
  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;
}

.btn {
  width: 100%;
	background: url(images/rsz_buttons.png);
	background-size: cover;
	border: 1px solid rgba(0,0,0,0.7);
	height: 22px;
	color: #b8c0c8;
	cursor: pointer;
	border-radius: 4px;
	outline: none;
	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);
}

.btn:hover {
	background: url(images/hover_buttons.png) no-repeat;
	background-size: cover;
	border: none;
	color: white;
	border: 1px solid rgba(0,0,0,0.7);
}

.cpu {
  width: 120px;
  height: 70px;
  min-width: 120px;
  min-height: 70px;
  border: none;
  background: none;
  box-shadow: none;
  resize: none;
  padding: 7px;
}

.cpu:hover {
  resize: both;
}

/*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%); /* FF3.6-15 */
  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)); /* Chrome4-9,Safari4-5 */
  background: -webkit-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* Opera 11.10-11.50 */
  background: -ms-linear-gradient(top, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* IE10 preview */
  background: linear-gradient(to bottom, #ff0000 0%,#ff0000 7%,#faff00 20%,#00ff2a 38%,#006d10 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  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%;
}

#mainContainer {
  transition: all 100ms ease-in-out;
  transform-origin: 0 0 0;
  transform: translate(0,0) scale(1);
}

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



    
        
            
            Device Name
                
                    
                      item 1
                    
                
            
            Interface
                
                    
                      item 2
                    
                
            
        
        
        
            
        
    
    
      
                          Imedi 1             
                                                        0                -6                -12                -20                -30                -40                -50                -60              
                              
              
                              
              
                                                                                                                                        
                          Resolution Aspect FPS V-Format A-Format L R             
                          1920x1080 16:9 25 H264 MP2 --- ---             
          
                          RUSTAVI 2 2             
                                                        0                -6                -12                -20                -30                -40                -50                -60              
                              
              
                              
              
                                                                                                                                        
                          Resolution Aspect FPS V-Format A-Format L R             
                          720x576 15:11 25 H264 MP2 --- ---

Eriks Klotins · Accepted Answer

In your code, you mix px with %. Do not do that! It messes up layout calculation in the browser. I would suggest using only % to specify column widths and make sure you always have a total of 100% for all cols.

Table's <td> gets wider if I set its content width in pixels

Answers (1)

Related Questions

Table&#39;s &lt;td&gt; gets wider if I set its content width in pixels

Answers (1)

Related Questions

Table's <td> gets wider if I set its content width in pixels