javaScript生成的表创建了非平方表单元格

Question

body {
    background-color: darkblue;
}
#tableDiv {
    margin-left: 15%;
    margin-top: 5%;
}
.testing {
    background-color: "green";
}

<div id="tableDiv"></div>

问题在于

border-spacing

。默认情况下，相邻单元格之间存在

2px

边界间距。您必须通过从最终高度中减去两个来将其分为计算。

恢复：

Answer 1

const pageWidth = document.documentElement.scrollWidth;
const nRows = 10; const nColumns = 10;
const tableDiv = document.getElementById("tableDiv");
tableDiv.style.width = 0.7*pageWidth + "px";
tableDiv.style.height = 0.7*pageWidth + "px";
tableDiv.style.backgroundColor = "yellow";
     
        
// Dynamically generate a table of the specified dimensions
function constructTable(nR, nC) {
    const tbl = document.createElement("table"); tbl.id = "test table";
    var tRow; var tCell;
    for (let r = 0; r < nR; r++) { // Use 'let,' not 'var,' or else all row/column numbers will be set to the final (maximum) values of r and c
        tRow = document.createElement("tr");
        tbl.appendChild(tRow);
        for (let c = 0; c < nC; c++) {
            tCell = document.createElement("td"); tCell.className = "testing"; tRow.appendChild(tCell);
        }
    }
    return tbl;
}
        
function showTable(t) {
    tableDiv.innerHTML = "";
    tableDiv.appendChild(t);
    const dynamicSizeCells = document.getElementsByClassName("testing");
    for (var i = 0; i < dynamicSizeCells.length; i++) {
        dynamicSizeCells[i].style.width = 0.7*pageWidth/nColumns + "px";
        
        // only subtract 2 starting from the second row!
        dynamicSizeCells[i].style.height = 0.7*pageWidth/nRows + (i > nRows * (nColumns - 1) ? 0 : -2) + "px";
        dynamicSizeCells[i].style.backgroundColor = "green";
    }
   //console.warn("Div width is " + tableDiv.style.width + ", div height is " + tableDiv.style.height + "; cell width is " + dynamicSizeCells[0].style.width + ", cell height is " + dynamicSizeCells[0].style.height);
}
        
const theTable = constructTable(nRows, nColumns);
showTable(theTable);

body {
    background-color: darkblue;
}
#tableDiv {
    margin-left: 15%;
    margin-top: 5%;
}


.testing {
    background-color: "green";
    box-sizing: border-box;
}

<div id="tableDiv"></div>

为什么这不水平影响表？

但是，由于设置为

table-layout

，因此细胞宽度会自动缩小以适合表的宽度。请参见下面的示例，其中我们为每个单元格一个宽度额外的100px，但结果仍然相同。

auto

body { background-color: darkblue; } #tableDiv { margin-left: 15%; margin-top: 5%; } .testing { background-color: "green"; box-sizing: border-box; }

我将通过说您简化代码，问题将消失。

仅设置表的大小，您不需要为单元格指定尺寸。

<div id="tableDiv"></div>

const makeTableMarkup = (rows, cols) => {
  const a = ['<table>']
  for (let r = 0; r < rows; r++) {
    a.push('<tr>')
    for (let c = 0; c < cols; c++) {
      a.push('<td></td>')
    }
    a.push('</tr>')
  }
  a.push('</table>')
  return a.join('')
}

document.querySelectorAll('.d').forEach(d => {
  d.innerHTML = makeTableMarkup(d.dataset.rows, d.dataset.cols)
})

body {
  background-color: darkblue;
  margin: 1em;
  display: flex;
  justify-content: center;
  gap: 1em;
}

.d {
  width: 25vw;
  aspect-ratio: 1;              /* makes height equal to width */
  background-color: yellow;
  
  table {
    width: 100%;
    height: 100%;
  }

  td {
    background-color: green;
  }
}

javaScript生成的表创建了非平方表单元格

问题描述投票：0回答：2

2个回答

最新问题

javaScript生成的表创建了非平方表单元格

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2