如何添加邊距到​​元素的第一行僅

Question

我想添加邊際到我的td標籤只在我的小夥子。整個表格都有「tableizer-table」類。第一個tr（thead中唯一的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>

我主要關心的只是FIRSTROW風格。我見過這裏推薦使用的其他解決方案

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

但這對我來說也不適用。這是一個小提琴。 http://jsfiddle.net/98oL12tk/12/

它很長，表格使用JavaScript中的函數和循環生成，但我發現使用chrome控制檯/編輯器/調試器可以幫助查看HTML元素。

Answer 1

表格單元格不支持邊距。您可以通過使用給定的或任何類似的方法實現所需的輸出。

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

您還可以添加在表格單元格 「透明邊框」（僅當您不需要任何特定顏色的邊框）。

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

基於您的評論 「只是希望每個元素的藍色背景之間的空間」。

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