JavaScript表收缩以适应其内容

下面的代码生成所需高度更高的单元格 我希望单元格与内部画布相匹配，以便在其上绘制对角线

var miglobal=[]；
var ref1=document.createElement（“表”）；
var refx=document.createElement（“tbody”）；
参考文献1.附录儿童（参考文献X）；
变量ref2，ref3；
控制台日志（参考文献1）；
对于（变量y=0；y<25；y++）{
ref3=refx.insertRow（y）；
对于（变量x=0；x<25；x++）{
ref2=ref3.插入单元（x）；
var cnv=document.createElement（“画布”）；
setAttribute（“id”，“mycnv”+（y*25+x））.toString（）；
cnv.setAttribute（“高度”、“30px”）；
cnv.setAttribute（“宽度”、“30px”）；
var cntx=cnv.getContext（“2d”）；
cntx.moveTo（0,0）；
cntx.lineTo（30,30）；
cntx.stroke（）；
多叶推进（cntx）；
参考文献2.儿童（cnv）；
};
};
文件.正文.附件（参考文献1）
表格{
边框：2个黑色实心；
}
tr：悬停{
背景：红色；
}
tr>td{
边框：2件纯黑；
填充：0；
}
td>画布{
身高：100%；
宽度：100%；
填充：0；
}
默认情况下，画布元素显示为内联元素。这将导致生成一个线框，默认情况下画布元素与线框的基线对齐。您遇到的额外空间是基线以下的空间（即下降到基线以下的字符（如“g”）的空间）

在您的示例中，可以将画布元素更改为显示为块元素。例如

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

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

或者，您可以将画布元素更改为以不同的垂直对齐方式显示。例如

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

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

您正在使用CSS和position属性创建画布大小，删除画布的宽度和高度CSS规则，应该可以正常工作。