边界并没有全桌

Question

我有一个边框，我试图绕着整个桌子，但它停在奇数的地方，并没有圈整个表。看起来像这样：

所以你可以看到边界在一个奇怪的地方停在桌子周围，所以如何让它完全包围桌子呢？

同样由于某些规范，必须使用Javascript创建整个内容。

function createTable(matrix) {
  var div = document.createElement("div");
  div.style.minWidth = "120px";
  //div.style.height = "100px";
  div.style.top = "0px";
  div.style.left = "0px";
  div.style.zIndex = 1000;
  div.style.background = "grey";
  div.style.color = "white";
  div.style.position = "absolute";

  var header = document.createElement("div");
  header.style.background = "red";
  header.style.textAlign = "center";
  header.innerHTML = "Script Stats";
  div.appendChild(header)

  var x = document.createElement("TABLE");
  //x.style.padding = "50px";

  for (i = 0; i < matrix.length; i++) {
    tableData[i] = [];
    tableData[i][0] = document.createElement("TR");
    x.appendChild(tableData[i][0]);
    for (let k = 0; k < matrix[i].length; k++) {
      var z = document.createElement("TD");
      z.innerHTML = matrix[i][k];
      z.style.textAlign = "center";
      z.style.padding = "5px";
      tableData[i][0].appendChild(z);
    }
  }
  x.style.border = "2px solid white";
  div.appendChild(x);

  var bottom = document.createElement("div");
  bottom.style.background = "red";
  bottom.innerHTML = "Menu";
  bottom.style.textAlign = "center";
  div.appendChild(bottom);

  document.body.appendChild(div);
}
createTable(divTable);

Answer 1

好的，我重现了你的问题，并且 解决问题的简单方法是

<style>
 table { border-collapse: collapse; }
</style>

你可以在这里看到它： https://jsbin.com/jenupigupe/edit?html,js,output