JavaScript 表格缩小以适应其内容答案

【问题标题】：JavaScript table to shrink to fit its contentJavaScript 表格缩小以适应其内容
【发布时间】：2015-10-28 03:51:34
【问题描述】：

以下代码生成所需高度更高的单元格我希望单元格适合其内部画布以便在它们上绘制对角线

var miglobal = [];
var ref1 = document.createElement("table");
var refx = document.createElement("tbody");
ref1.appendChild(refx);
var ref2, ref3;

console.log(ref1);
for (var y = 0; y < 25; y++) {
    ref3 = refx.insertRow(y);

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

所有都是动态生成的，因为手头的 25*25 可能很麻烦

【问题讨论】：

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

标签： javascript html-table

【解决方案1】：

默认情况下，canvas 元素显示为内联元素。这会导致生成带有画布元素的线框，默认情况下与线框的基线对齐。您遇到的额外空间是基线下方的空间（即下降到基线下方的“g”等字符的空间）。

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

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

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

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

【讨论】：