Я создал HTML-таблицу, которая прекрасно отрисовывается на UI, я хочу задать границу для таблицы, но этого не происходит
- t тело получает границу правильно, но t head создаетпроблемы
- Я хочу сделать первые 2 строки таблицы заголовком таблицы или
bold текст второй строки
Фрагмент:
var tableValue = [{
"5": "2809",
"6": "14287",
"7": "59293",
"8": "100743",
"9": "97757",
"10": "104908",
"11": "63379",
"12": "72618",
"13": "136867",
"14": "202212",
"15": "153197",
"16": "93730",
"17": "99993",
"18": "113918",
"19": "114126",
"20": "108788",
"21": "66446",
"22": "10459",
"OUTLET": "",
"BILL___DATE": "TOTAL",
"TOTAL": "1615530"
},
{
"5": "2677",
"6": "5948",
"7": "10259",
"8": "17453",
"9": "21044",
"10": "21235",
"11": "19691",
"12": "22327",
"13": "37018",
"14": "51560",
"15": "68478",
"16": "33797",
"17": "32089",
"18": "29810",
"19": "32071",
"20": "30675",
"21": "34726",
"22": "5568",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "476426"
},
{
"5": "132",
"6": "6251",
"7": "19551",
"8": "31286",
"9": "36486",
"10": "34866",
"11": "17343",
"12": "20845",
"13": "38726",
"14": "88845",
"15": "39685",
"16": "24593",
"17": "28852",
"18": "31652",
"19": "35708",
"20": "38314",
"21": "17373",
"22": "645",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "511153"
},
{
"5": "0",
"6": "0",
"7": "2963",
"8": "11132",
"9": "8799",
"10": "8371",
"11": "8582",
"12": "11856",
"13": "23646",
"14": "11929",
"15": "11946",
"16": "12162",
"17": "13064",
"18": "12182",
"19": "16915",
"20": "12046",
"21": "1828",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "167421"
},
{
"5": "0",
"6": "0",
"7": "892",
"8": "2674",
"9": "5797",
"10": "4583",
"11": "3950",
"12": "4597",
"13": "9567",
"14": "11079",
"15": "8712",
"16": "4445",
"17": "7730",
"18": "11314",
"19": "8765",
"20": "6012",
"21": "2024",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-09-01",
"TOTAL": "92141"
},
{
"5": "0",
"6": "0",
"7": "1122",
"8": "3860",
"9": "6297",
"10": "10145",
"11": "5109",
"12": "4418",
"13": "9603",
"14": "11024",
"15": "9452",
"16": "5707",
"17": "9455",
"18": "11709",
"19": "11553",
"20": "12863",
"21": "3387",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "115704"
},
{
"5": "0",
"6": "1122",
"7": "9605",
"8": "13939",
"9": "10278",
"10": "15947",
"11": "5077",
"12": "6046",
"13": "8112",
"14": "10164",
"15": "7366",
"16": "3414",
"17": "4136",
"18": "7295",
"19": "3052",
"20": "4656",
"21": "3525",
"22": "1579",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "115313"
},
{
"5": "0",
"6": "0",
"7": "12694",
"8": "11191",
"9": "5931",
"10": "9017",
"11": "1188",
"12": "2331",
"13": "7590",
"14": "7265",
"15": "5924",
"16": "5627",
"17": "3456",
"18": "5135",
"19": "1634",
"20": "2104",
"21": "2470",
"22": "40",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "83597"
},
{
"5": "0",
"6": "966",
"7": "2207",
"8": "9208",
"9": "3125",
"10": "744",
"11": "2439",
"12": "198",
"13": "2605",
"14": "10346",
"15": "1634",
"16": "3985",
"17": "1211",
"18": "4821",
"19": "4428",
"20": "2118",
"21": "1113",
"22": "2627",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "53775"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.classList.add("test");
tr.appendChild(th);
tr.classList.add("table-active")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("HourlyDate");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableValue);
table.table-bordered {
border: 1px solid black;
margin-top: 20px;
}
table.table-bordered>thead>tr>th {
border: 1px solid black;
}
table.table-bordered>tbody>tr>td {
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>
Какие ошибки я совершаю?Я хочу сделать второй ряд жирным шрифтом.