Bootstrap 5.2 不在 d-none 上隐藏表头

Question

我想在小屏幕上使用引导程序隐藏表格的某些列。

我在th 和td 元素上使用d-none d-lg-table-cell 类，我想隐藏它，它在tbody 中工作，但在thead 内部它不起作用。

    <table class="table">
      <thead>
        <tr>
          <th scope="d-none d-lg-table-cell">#</th>
          <th scope="d-none d-lg-table-cell">Username</th>
          <th scope="col">First name</th>
          <th scope="col">Last name</th>
          <th scope="col">Groups</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users | async; let i = index">
          <th class="d-none d-lg-table-cell" scope="row">{{i}}</th>
          <td class="d-none d-lg-table-cell">{{user.userName}}</td>
          <td>Doe</td>
          <td>John</td>
          <td>
            <span class="badge bg-info mx-1" *ngFor="let group of user.userGroups">{{group}}</span>
          </td>
        </tr>
      </tbody>
    <table>

Answer 1

我想到了。我将类名添加到scope 而不是class。