JavaScript table to shrink to fit its content -

the following code produces cells higher height needed want cells fit inner canvas in order draw diagonal on them

var miglobal = [];  var ref1 = document.createelement("table");  var refx = document.createelement("tbody");  ref1.appendchild(refx);  var ref2, ref3;    console.log(ref1);  (var y = 0; y < 25; y++) {      ref3 = refx.insertrow(y);        (var x = 0; x < 25; x++) {          ref2 = ref3.insertcell(x);          var cnv = document.createelement("canvas");          cnv.setattribute("id", ("mycnv" + (y * 25 + x)).tostring());          cnv.setattribute("height", "30px");          cnv.setattribute("width", "30px");          var cntx = cnv.getcontext("2d");          cntx.moveto(0, 0);          cntx.lineto(30, 30);          cntx.stroke();          miglobal.push(cntx);          ref2.appendchild(cnv);      };  };  document.body.appendchild(ref1);

table {      border: 2px black solid;  }  tr:hover {      background: red;  }  tr >td {      border: 2px solid black;      padding: 0;  }  td > canvas {      height: 100%;      width: 100%;      padding: 0;  }

all generated dynamically because 25*25 @ hand table cumbersome

by default, canvas element displayed inline element. causes generation of line box canvas element default aligned baseline of line box. space encountering space below baseline (i.e. space characters such "g" descend below baseline).

in example, change canvas element displayed block element. example...

td > canvas {   padding: 0;   display: block; } 

or change canvas element displayed different vertical alignment. example...

td > canvas {   padding: 0;   vertical-align: middle; }