I am currently using JavaScript to generate some HTML that displays a Bootstrap table. Below is the code for creating this:
function displayTableData(d){
let html = '';
html += '<table id="my-table" class="table">'
html += '<body>'
html += '<h5 id="team-name">' + d.TEAM_NAME + '</h5>'
html += '<tr>'
html += '<td class="table-labels">Wins</td>'
html += '<td class="table-data" id="wins">' + d.WINS + '</td>'
html += '</tr>'
html += '<tr>'
html += '<td class="table-labels">Losses</td>'
html += '<td class="table-data" id="Losses">' + d.LOSSES + '</td>'
html += '</tr>'
html += '<tr>'
html += '<td class="table-labels">Points</td>'
html += '<td class="table-data" 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;
}
Presently, only the wins, losses, and points rows have the background color #EAEAEA applied.
Is there a way I can also apply the same background color (#EAEAEA) to the top row (team-name) as well?
(I want the entire table to have the background color.)
Thank you!