How to add margins to the first row of elements only

Question

I'm trying to add margins to my td tags in only my thead. The entire table has the class "tableizer-table". The first tr (the only tr in thead) has the class "tableizer-firstrow". I've tried all of the following and playing around with different stuff, but nothing seems to work.

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>

I'm primarily concerned with just the firstrow styles. I've seen other solutions on here that recommend using

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

but that isn't working for me either. Here is a fiddle. http://jsfiddle.net/98oL12tk/12/

It's very long and the table is generated using functions and loops in JavaScript, but I find using the chrome console/editor/debugger helps with looking at the HTML elements.

Why not use padding? Table cells "margin" are controlled by the table, not the cell itself (css margin is not applied to table cells directly) — F.Igor, Oct 26 '16 at 14:28
Also, border-spacing affects only to table elements, not rows. So, the whole table will have border spacing 4px. — F.Igor, Oct 26 '16 at 14:32
@Igor Sorry, I should've been more specific with what I wanted - my goal is to have the backgrounds of each of the header row cells to be dark blue, but to have them spaced apart separately. Using padding will give the entire row a solid background, where as i'd like each of the cells to have separate blue backgrounds — Matthew Sirkin, Oct 26 '16 at 14:34

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Table cells do not support margins. You can achieve desired output by using given or any similar approaches.

Add, increase padding on table cells.

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

Add a div inside table cell. Give margins to this newly added div.

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

You may also add "transparent border" on table cells (only if you do not need borders of any specific color).

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

Based on your comment "just want space between the blue backgrounds for each element".

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

Also refer : Using margin with display table-cell for more details.

1. gives me the right amount of spacing but keeps the border uniformly blue. 2. I will try that but that requires changing my javascript. 3. i tried the transparent border and it still comes in as blue. — Matthew Sirkin, Oct 26 '16 at 14:44
Try changing the background-color from td to the container div. — F.Igor, Oct 26 '16 at 14:52
Try this : **.tableizer-firstrow td { background-color: #104E8B; color: white !important; padding: 8px; border: 2px solid #CCC; }** — Jackson, Oct 26 '16 at 14:55

Amin Setayeshfar · Answer 2 · 2016-10-26T14:53:01.967

0

just add display:block; to it and it will do as i checked in your fiddle

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

edited Oct 26 '16 at 14:53

answered Oct 26 '16 at 14:38

Amin Setayeshfar

468
6
23

For me, using display: block stacks the elements vertically. I still want them next to each other, i just want space between the blue backgrounds for each element – Matthew Sirkin Oct 26 '16 at 14:40
you are right.. you should use display: inline-block check if it helps? – Amin Setayeshfar Oct 26 '16 at 14:51

How to add margins to the first row of elements only

2 Answers2