Matthew Sirkin Matthew Sirkin - 1 month ago 7
CSS Question

How to add margins to the first row of <td> elements only

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.

Answer

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

  1. Add, increase padding on table cells.
.tableizer-firstrow td {
    background-color: #104E8B;
    color: white !important;
    padding: 8px; /*4 padding & 4 margin, so giving 8*/
}
  1. Add a div inside table cell. Give margins to this newly added div.
.tableizer-firstrow td div {
    margin: 4px;
}
  1. 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;
}
  1. 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.