DMS Grid CSS Solution

NOT WORKING :-(

by Ben Clayton

HTML

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

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




<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;
}

.col0 {
  width: 1% important;
}
.col1 {
  width: 2% important;
}
.col2 {
  width: 5% important;
}
.col3 {
  width: 2% important;
}
.col4 {
  width: 2% important;
}
.col5 {
  width: 5% important;
}
.col6 {
  width: 2% important;
}

JavaScript

// find elements
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');
  }
})