Question

我试图仅在我的thead中为我的td标签添加边距。整个表都有类＆＃34; tableizer-table＆＃34;。第一个tr（thead中唯一的tr）有class＆＃34; tableizer-firstrow＆＃34;。我已经尝试了以下所有内容并玩弄了不同的东西，但似乎没有任何效果。

＆＃13;

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);
//}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我主要关心的是第一种风格。我在这里看到了推荐使用

的其他解决方案

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

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

它很长，表是使用JavaScript中的函数和循环生成的，但我发现使用chrome console / editor / debugger有助于查看HTML元素。

Answer 1

表格单元格不支持边距。您可以使用给定或任何类似的方法来实现所需的输出。

添加，增加表格单元格的填充。

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 8px; /*4 padding & 4 margin, so giving 8*/
}

在表格单元格中添加div。为这个新添加的div提供边距。

.tableizer-firstrow td div {
    margin: 4px;
}

您还可以添加＆＃34;透明边框＆＃34;在表格单元格上（仅当您不需要任何特定颜色的边框时）。

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 4px;
    border: 4px transparent solid;
}

根据您的评论＆＃34;只想在每个元素的蓝色背景之间留出空格＆＃34;。

.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 8px; /*increase inner space*/
    border: 2px solid #CCC; /*increase outer space*/ 
}

另请参阅：Using margin with display table-cell了解更多详情。

Answer 2

只需添加display:block;就可以了，因为我检查了你的小提琴

.tableizer-firstrow td {
  background-color: #104E8B;
  color: red !important;
  display: inline-block;
  padding: 4px;
  margin: 10px;
}

如何仅向第一行元素添加边距

2 个答案: