DMS Grid CSS Solution

Converts EXT px to percentages

by Ben Clayton

HTML

<table class="table" width=100%>
  <tr>
    <th class="col col0" style="width:10px">Tiny</th>
    <th class="col col1" style="width:20px">Head Narrow</th>
    <th class="col col2" style="width:50px;display:none">NOT SHOWN</th>
    <th class="col col3" style="width:20px">Head Narrow</th>
    <th class="col col4" style="width:20px">Head Narrow</th>
    <th class="col col5" style="width:50px">Head Wide</th>
    <th class="col col6" style="width:20px">Head Narrow</th>
  </tr>
</table>

<table  class="table" width=100%>
  <tr>
    <td class="col col0" style="width:10px">td</td>
    <td class="col col1" style="width:20px">x</td>
    <th class="col col2" style="width:50px;display:none">x</th>
    <td class="col col3" style="width:20px">x</td>
    <td class="col col4" style="width:20px">x</td>
    <td class="col col5" style="width:50px">x</td>
    <td class="col col6" style="width:20px">x</td>
  </tr>
</table>

<div  class="table" style="width:100%">
  <div class="col col0" style="width:10px">div</div>
  <div class="col col1" style="width:20px">x</div>
  <div class="col col2" style="width:50px;display:none">x</div>
  <div class="col col3" style="width:20px">x</div>
  <div class="col col4" style="width:20px">x</div>
  <div class="col col5" style="width:50px">x</div>
  <div class="col col6" style="width:20px">x</div>
</div>




<ul>
  <li><input type=checkbox data-idx=0>0</li>
  <li><input type=checkbox data-idx=1>1</li>
  <li><input type=checkbox data-idx=2>2</li>
  <li><input type=checkbox data-idx=3>3</li>
  <li><input type=checkbox data-idx=4>4</li>
  <li><input type=checkbox data-idx=5>5</li>
  <li><input type=checkbox data-idx=6>6</li>
</ul>

CSS

td {
  border: 1px solid red;
}

th {
  border: 1px solid red;
  background-color: gray;
  color: white;
}
.col {
  display:inline-block;
   border: 1px solid red;
   font-size:20px;
   padding: 2px;
}
.table {
  font-size:0;
  border-spacing:0;
}

JavaScript

// find elements



$(".table").each(function(){

	var $cols = $(this).find(".col"); // 7 
  
  var totalwidth = 0;
  var widths = [];
  $.each($cols,function(){
  	var w = parseInt($(this).css('width'));
    if ($(this).css('display') != 'none'){
    	totalwidth += w + 2;
      widths.push(w);
    }
  });
	
  $.each($cols,function(){
  	if ($(this).css('display') != 'none'){
    	var w = widths.shift();
      w = (w/totalwidth) * 100;
    	$(this).css('width',w + '%');
    }
  });
  

});


var button = $("input")
// handle click and add class
button.on("click", function() {
  var n = $(this).data('idx');
  var state = $(".col" + n).css('display');
  console.log(n, state, this.checked);
  if (this.checked) {
    $(".col" + n).css('display', '');
  } else {
    $(".col" + n).css('display', 'none');
  }
})