Background color not applied to top row of Bootstrap table created with JavaScript-CodePudding

I'm using JavaScript to create some HTML that renders a Bootstrap table. Here's the code for that:

function displayTableData(d){

    let html = '';

    html  = '<table id="my-table" >'
    html  = '<body>'
    html  = '<h5 id="team-name">'   d.TEAM_NAME   '</h5>'

    html  = '<tr>'
    html  = '<td >Wins</td>'
    html  = '<td  id="wins">'   d.WINS   '</td>'
    html  = '</tr>'

    html  = '<tr>'
    html  = '<td >Losses</td>'
    html  = '<td  id="Losses">'   d.LOSSES   '</td>'
    html  = '</tr>'

    html  = '<tr>'
    html  = '<td >Points</td>'
    html  = '<td  id="points">'   d.POINTS   '</td>'
    html  = '</tr>'

    html  = '</body>'
    html  = '</table>'

    document.getElementById('my-data').innerHTML = html

}

CSS:

#my-table {
/*    display: none; */
    background-color: #EAEAEA;
    padding: 20px;
    border-radius: 5px;

}

Currently, only the wins, losses, and points rows have the background color #EAEAEA applied.

How do I also get the top row (team-name) to have the background color #EAEAEA?

(I want to apply the background color to the entire table.)

Thank you!

CodePudding user response：

You should remove <body> and <h5> tags from the table. It is incorrect. Inside the <table> tag You can only put <thead>, <tbody> or <tfoot>.

CodePudding user response：

HTML

The anatomy of a <table> is not flexible. The only content that can be within a <table> in descending order is depicted in Figure I.

Figure I

Element	Content
`<table>`	`<caption>`
	`<colgroup>`
	`<thead>`
	`<tbody>`
	`<tfoot>`
`<caption>`	Flow content
`<colgroup>`	`<col>`
`<thead>` `<tbody>` `<tfoot>`	`<tr>`
`<tr>`	`<th>` `<td>`
`<th>`	Flow content, no sectioning or heading content
`<td>`	Flow content

<body> is always after the <head> element and never the child of another element. <tbody> should be placed within <table> and if not explicitly placed within a <table>, the browser will add it by default. <h5> should be a <caption> placed within the <table> and before <tbody>.

CSS

CSS in a Bootstrap environment is tricky. Usually the Bootstrap styles set by BS classes cannot be overridden by adding CSS after the BS stylesheet CSS. Typically, novices will use !important but using it can become a messy problem later on. It is safer to override BS CSS by specificity. Simply double up the class selector (see Figure II).

It's also important to familiarize yourself with the BS classes associated with <table> otherwise you'll be struggling trying to do simple styling.

Figure II

table.table.table {/*...*/}
th.label.label {/*...*/}
td.data.data {/*...*/}

It appears that you wanted rounded corners on the <table> which cannot simply be done with border-radius: 5px. In the example, the CSS has all of the required rulesets to make rounded corners marked with a ✳️. The JavaScript has also been improved.

Details are commented in example

/**
 * Render a table with the given object as content to a given element
 * within the DOM.
 * @param {object} data - Object that provides the content
 * @param {string|object} element - As a string it is a selector. As an
 *        object it is a DOM object. If undefined it defaults to <body>
 * @param {boolean} clear - If true, it will remove everyting within the
 *        element to which the <table> will be inserted into. @default 
 *        is false.
 */
function displayTableData(data, element, clear = false) {

  let root = typeof element === "string" ? document.querySelector(element) : element === undefined ? document.body : element;

  if (clear) root.replaceChildren();

  let html = `<table id="${data.id}" >
            <caption >${data.team}</caption>
            <tbody>
              <tr>
                <th  scope="row">Wins</th>
                <td >${data.wins}</td>
              </tr>
              <tr>
                <th  scope="row">Losses</th>
                <td >${data.losses}</td>
              </tr>
              <tr>
                <th  scope="row">Points</th>
                <td >${data.points}</td>
              </tr>
            </tbody>
          </table>`;
  root.insertAdjacentHTML("beforeend", html);
}

const stats = {
  id: "table-data1",
  team: "San Fransisco Giants",
  wins: 81,
  losses: 81,
  points: 716
};

displayTableData(stats, ".row");

table.table.table {
  width: 50vw;
  margin: 20px auto;
  padding: 0;/*✳️*/
  border-spacing: 0;/*✳️*/
  border-collapse: separate;/*✳️*/
  border-bottom-left-radius: 5px;/*✳️*/
  border-bottom-right-radius: 5px;/*✳️*/
}

caption.caption-top {
  padding: 0;
  font-size: 1.2rem;
  border-top-left-radius: 5px;/*✳️*/
  border-top-right-radius: 5px;/*✳️*/
  text-align: center;
}

table.table.table,
caption.caption-top,
th.label.label,
td.data.data {
  border: 0.5px solid #000;/*✳️*/
  background: #eaeaea;
}

table.table.table {
  border-bottom: 0;/*✳️*/
  border-top: 0;/*✳️*/
  background: transparent;/*✳️*/
}

th.label.label {
  font-weight: 500;
}

tr:last-of-type th.label.label {
  border-bottom-left-radius: 5px;/*✳️*/
}

tr:last-of-type td.data.data {
  border-bottom-right-radius: 5px;/*✳️*/
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main >
    <section ></section>
  </main>
</body>

</html>