如何设计表头单元格在顶行和第一列？答案

【问题标题】：How to design table with header cells in the top row and first column?如何设计表头单元格在顶行和第一列？
【发布时间】：2020-11-08 16:35:33
【问题描述】：

在这里，我试图实现，设计一个表头单元格在顶行和第一列。这是我的简单设计。

基于我在相应单元格中显示数据并为单元格着色，我得到了一些数据作为响应。

我们如何在 bootsrap 中设计这种类型的表格？任何指导将不胜感激。

【问题讨论】：

标签： html css reactjs bootstrap-4

【解决方案1】：

在正确的地方使用 TH

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <table class="table">
      <thead>
        <tr>
          <th>MA/RCF</th>
          <th>100</th>
          <th>156</th>
          <th>180</th>
          <th>856</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>0</th>
          <td>...</td>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <th>100</th>
          <td>...</td>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

【讨论】：