如何为insertCell生成的表格单元格设置样式？

下面针对你用insertCell生成的单元格，提供几种简单有效的样式设置方案：

方法1：用CSS类统一控制（最推荐） #

这种方式把样式和逻辑分离，方便后续修改维护。

步骤： #

1. 先在HTML里添加CSS样式（可以放在<style>标签里，或者外部CSS文件）：

/* 定义动态单元格的样式 */
.table-dynamic-cell {
    font-size: 24px; /* 更大的字体尺寸，按需调整数值 */
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    border: 1.5px solid rgb(117, 117, 117);
    padding: 8px; /* 可选，增加内边距让内容更美观 */
}

2. 修改你的JS代码，给每个生成的单元格添加这个类：

window.onload = function() {
  fetch('http://localhost:3000/teste')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      var table = document.getElementById('table');

      for (var i = 0; i < 8; i++) {
        var row = table.insertRow(i + 1);
        // 批量生成单元格并添加样式类
        var cells = [];
        for(var j=0; j<10; j++){
            var cell = row.insertCell(j);
            cell.className = 'table-dynamic-cell'; // 绑定CSS类
            cells.push(cell);
        }

        // 填充内容
        cells[0].innerHTML = data[i][0];
        cells[1].innerHTML = data[i][1];
        cells[2].innerHTML = data[i][2];
        cells[3].innerHTML = data[i][3];
        cells[4].innerHTML = data[i][4];
        cells[5].innerHTML = data[i][5];
        cells[6].innerHTML = data[i][6];
        cells[7].innerHTML = data[i][7];
        cells[8].innerHTML = data[i][8];
        cells[9].innerHTML = data[i][9];
      }
    })
}

后续要调整样式，直接修改CSS类即可，不用动JS代码。

方法2：直接设置行内样式（快速临时方案） #

如果只是临时测试或者样式逻辑简单，可以直接给单元格的style属性赋值：

// 生成单元格后直接设置样式
var cell1 = row.insertCell(0);
cell1.style.fontSize = '24px';
cell1.style.border = '1.5px solid rgb(117, 117, 117)';
cell1.style.fontFamily = 'Tahoma, Verdana, Segoe, sans-serif';
// 其他单元格同理重复设置

这种方式样式和JS代码耦合，不利于长期维护，仅适合临时场景。

方法3：通过CSS选择器批量控制 #

如果你的表格只有第一行是表头，后面全是动态生成的行，可以直接用CSS选择器选中所有动态单元格，完全不用修改JS：

/* 选中表格中除第一行外的所有td单元格 */
#table tr:not(:first-child) td {
    font-size: 24px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    border: 1.5px solid rgb(117, 117, 117);
}

这种方式最省心，直接通过CSS规则就能覆盖所有动态单元格样式。

内容的提问来源于stack exchange，提问作者Jean Zacarchuka