如何在<td>元素

我试图在我的标题中为td标签添加边距。整个表具有"tableizer-table"类。第一个tr(头中唯一的tr)具有"tableizer-firstrow"类。我已经尝试了以下所有方法，并尝试了不同的东西，但似乎都不起作用。

var eo_cats = {
  para1: ["Item #"],
  para2: ["Type"],
  para3: ["Operating Temp"],
  para4: ['Dia'],
  para5: ['Length'],
  para6: ["Material"],
  para7: ["Junction"],
  para8: ["Price"],
  para9: ["order"]
};
var partnumpref = [
  ["NB4-CAXL-14U-12-"],
  ["A", "B", "C"], //dia
  ["A", "B", "C"], //len
  ["G", "U", "E"], //junction type
]
var paras1 = [
  ["K"],
  ["-270°C to 1372°C, –454°F to 2501°F"],
  ['1/8"', '3/16"', '1/4"'],
  ['6"', '12"', '18"'],
  ["316SS"],
  ["Grounded", "Ungrounded", "Exposed"],
  ["$51.00"],
  ["order"]
];
//for (q = 0; q < paras1.length; q++) {
//  console.log(paras1[q]);
//}
function arrayRecursion(paras) {
  if (paras.length == 1) {
 //   console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + "@" + allValues[i]);
    }
  }
  return results;
  
}
//console.log(arrayRecursion(paras1));
function arrayRecursion2(paras) {
  if (paras.length == 1) {
//    console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion2(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + allValues[i]);
    }
  }
  return results;
}
var eopartnum = arrayRecursion2(partnumpref);
function generate_table(paras) {
var sep = [];
var res = [];
var singarrres = arrayRecursion(paras);
for (k = 0; k < singarrres.length; k++) {
  var str = singarrres[k];
  var res = str.split("@");
  sep.push(res);
}
//console.log(sep);
  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];
  // creates a <table> <thead> <tbody> elements
  var tbl = document.createElement("table");
  var tblHead = document.createElement("thead");
  var tblBody = document.createElement("tbody");
  tblBody.className = "tableizer-table"
  // creating all cells
  for (var i = 0; i < sep.length; i++) {
    // creates a table row
    var row = document.createElement("tr");
    var firstcell = document.createElement("td");
    var firstcellText = document.createTextNode(eopartnum[i]);
    firstcell.appendChild(firstcellText);
    row.appendChild(firstcell);
    for (j = 0; j < sep[i].length; j++) {
      var cell = document.createElement("td");
      var cellText = document.createTextNode(sep[i][j]);
      //    if(paras[j].length==1) {
      //      var cellText =
      //      document.createTextNode(paras[j][0]);
      //    } else {
      //      var cellText = document.createTextNode("too many options");
      //    }
      //    for (var k = 0; k < paras[j].length; k++) {
      //      var cellText = document.createTextNode(paras[k][0]);
      cell.appendChild(cellText);
      row.appendChild(cell);
      tblBody.appendChild(row);
      //      console.log(k + ': Element ' + i + ': Value ' + paras[k][i]);
      //    }
    }
  }
  // add the row to the end of the table body
  var eo_hrow = document.createElement("tr");
  eo_hrow.className = "tableizer-firstrow";
  var eo_head_row = tblHead.appendChild(eo_hrow);
  //  eo_head_row.className = "tableizer-firstrow"
  for (var k in eo_cats) {
    for (var i = 0; i < eo_cats[k].length; i++) {
      var headCell = document.createElement("td");
      var headText = document.createTextNode(eo_cats[k][0]);
      headCell.appendChild(headText);
      eo_head_row.appendChild(headCell);
//      console.log(k + ': Element ' + i + ': Value ' + eo_cats[k][i]);
    }
  }
//  console.log(tbl);
//  console.log(headCell);
//  console.log(eo_head_row);
  tbl.appendChild(tblHead);
  document.getElementsByTagName("table").className = "tableizer-table";
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
}
document.getElementById("tgen").innerHTML = generate_table(paras1);
//var rows = document.getElementsByTagName('tr');
//for (var i = 1; i < rows.length; i++) {
//  var cells = rows[i].getElementsByTagName('td');
// console.log(cells[3]);
// console.log("i is " + i);
// console.log(i);
//  if (i > 9) {
// console.log("i in if is " + i)
// console.log(cells[3]);
//    cells[3].innerHTML = '1/8"';
//  }
//  console.log(i);
//}

.eo_product_listing_table {}
.tableizer-table tr:nth-child(even) {
  background-color: #eee;
}
.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 2px solid #CCC;
  text-align: left;
  color: black;
}
.tableizer-table thead {
  font-weight: bold;
  text-align: left;
}
.tableizer-firstrow {
  background-color: white;
  border-collapse: separate;
  border-spacing: 5px;
  margin: 4px;
}
.tableizer-firstrow td {
  background-color: #104E8B;
  color: white !important;
  padding: 4px;
  margin: 4px;
}

<div id="tgen"><body>
</body></div>

我主要关心的是第一行样式。我在这里看到了其他建议使用

  border-collapse: separate;
  border-spacing: 4px 4px;

但这对我也不起作用。这是一把小提琴。http://jsfiddle.net/98oL12tk/12/

它很长，表是使用JavaScript中的函数和循环生成的，但我发现使用chrome控制台/编辑器/调试器有助于查看HTML元素。