如何为API渲染的表格正确应用Bootstrap表头样式？

问题核心原因 #

1. Bootstrap版本不匹配：你引入了Bootstrap 5的CSS文件，但JS资源用的是Bootstrap 4版本，版本混用会导致样式和功能异常。
2. HTML标签转义错误：使用document.write时用了</>转义字符，浏览器会将其解析为文本而非实际HTML标签，导致Bootstrap类无法作用到元素上。
3. 表格结构错误：循环中重复创建<tbody>标签，一个标准表格应仅有一个<tbody>，重复创建会破坏表格结构，影响样式渲染。
4. Bootstrap 5类名变更：Bootstrap 5中表头深色样式类已从thead-dark改为table-dark，旧类名无法触发对应样式。

修复后完整代码 #

HTML资源引入（统一使用Bootstrap 5）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- 新增表格容器，避免覆盖整个页面 -->
<div id="sports-table-container"></div>

JavaScript代码（修正结构与标签问题）

async function loadSportsNews() {
  const apiUrl = "https://inshortsapi.vercel.app/news?category=sports";
  const response = await fetch(apiUrl);
  const result = await response.json();

  // 构建完整表格HTML，使用正确的标签和Bootstrap 5类名
  let tableHtml = `
    <table class='table'>
      <thead class='table-dark'>
        <tr>
          <th>SR NO</th>
          <th>AUTHOR NAME</th>
          <th>CONTENT</th>
          <th>DATE</th>
        </tr>
      </thead>
      <tbody>`;

  // 循环添加数据行，仅创建一次tbody
  result.data.forEach((item, index) => {
    tableHtml += `
      <tr>
        <td>${index + 1}</td>
        <td>${item.author}</td>
        <td>${item.content}</td>
        <td>${item.date}</td>
      </tr>`;
  });

  tableHtml += `</tbody></table>`;

  // 将表格插入指定容器，而非覆盖整个页面
  document.getElementById('sports-table-container').innerHTML = tableHtml;
}

loadSportsNews();

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