JavaScript创建的Bootstrap表格顶部行背景色未生效的解决方法

我使用JavaScript生成HTML渲染Bootstrap表格，相关代码如下：

JavaScript代码 #

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;

}

目前仅wins、losses、points对应的行应用了#EAEAEA背景色，顶部的team-name行未生效。如何让整个表格（包含顶部行）都应用该背景色？

问题根源是HTML结构不符合表格规范：

• 表格内不能直接放置<body>标签，你误用了这个标签，导致h5元素不在表格的有效内容区域中，无法继承表格的背景样式。
• 另外，h5不能直接作为表格的子元素，表格内仅允许<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>这类表格专用元素。

修复方法：

1. 将错误的<body>标签替换为表格专用的<tbody>标签。
2. 用<tr>和colspan="2"的<td>包裹h5，让它成为表格的一行，这样就能被表格的背景样式覆盖。

修改后的JavaScript代码：

function displayTableData(d){

    let html = '';

    html += '<table id="my-table" class="table">'
    html += '<tbody>'
    // 用合并单元格包裹团队名称，使其成为表格的一部分
    html += '<tr><td colspan="2"><h5 id="team-name">' + d.TEAM_NAME + '</h5></td></tr>'

    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 += '</tbody>'
    html += '</table>'

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

}

修改后，team-name所在的行就属于表格的一部分，表格的背景色会覆盖整个区域，包括顶部的团队名称行。

内容的提问来源于stack exchange，提问作者equanimity