无法将边框应用于HTML表格

时间：2018-12-27 10:48:23

标签： javascript css html-table bootstrap-4

我创建了一个HTML表格，该表格可以在UI上完美呈现，我想给表格加上边框，但是这没有发生

  • 身体没有正确对准边界，但头部却产生了问题
  • 我想将表格的前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>

我在犯什么错误？我也想将第二行设为粗体。

6 个答案:

答案 0 :(得分：1)

@vivek singh，您已经使用thead编写样式，但是thead在您的HTML中不可用。我已经根据当前HTML修改了CSS。希望它有用。

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,table.table-bordered>tbody>tr>th {
  border: 1px solid black;
}
table.table-bordered>tbody>tr:nth-child(2) {
   font-weight: bolder;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>

答案 1 :(得分：0)

这是预期的行为，边界正在崩溃 您可以将此属性添加到表中，

 table.table-bordered{
     border-collapse: separate;
 }

有关更多信息，请参见此链接 enter link description here

答案 2 :(得分：0)

更改代码中的以下样式以反映更改：

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>tbody>tr>th {
  border: 1px solid black;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid black;
}

table.table-bordered>tbody>tr:nth-of-type(2) td {
  font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>

答案 3 :(得分：0)

使用

  • .table-hover .table-active>th { border-color: black!important; }
  • .table-hover tr:nth-child(2) { font-weight: 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-hover .table-active>th {
    border-color: black!important;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid black;
}
.table-hover tr:nth-child(2) {
    font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>

答案 4 :(得分：0)

只需覆盖CSS 

tr:nth-child(2) td {
 font-weight: bold;
}
.table-bordered td, .table-bordered th {
 border: 1px solid black
}

答案 5 :(得分：0)

添加CSS 

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid /*your color code */;
}
相关问题
最新问题