在大屏幕以外的所有其他屏幕上隐藏表格列

Question

我想在除XL之外的所有其他屏幕上隐藏表中的特定列。似乎以下方法不适用于表格单元格。还有其他方法吗？

<table class="table table-striped table-hover">
    <thead>
       <tr>
          <th>Name</th>
          <th class="d-none d-xl-block">Type</th>
          <th class="d-none d-xl-block">IMO</th>
          <th>Created</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let report of reports">
          <td>{{report.name}}</td>
          <td class="d-none d-xl-block">{{report.type}}</td>
          <td class="d-none d-xl-block">{{report.imo}}</td>
          <td>{{report.reportCreated | date: 'dd-MM-yyyy'}}</td>  
       </tr>
    </tbody>
    </table>

Answer 1

  

引导程序解决方案

这里是Fiddle的Bootstrap解决方案。

HTML：

<table class="table table-striped table-hover">
   <thead>
      <tr>
         <th>Name</th>
         <th class="d-none d-xl-table-cell">Type</th>
         <th class="d-none d-xl-table-cell">IMO</th>
         <th>Created</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let report of reports">
         <td>{{report.name}}</td>
         <td class="d-none d-xl-table-cell">{{report.type}}</td>
         <td class="d-none d-xl-table-cell">{{report.imo}}</td>
         <td>{{report.reportCreated | date: 'dd-MM-yyyy'}}</td>  
      </tr>
   </tbody>
</table>

  

没有引导程序的解决方案

这里是Fiddle，您可以在其中选择屏幕尺寸。

CSS：

@media only screen and (max-width:1140px){
    table td:nth-child(2), table th:nth-child(2), table td:nth-child(3), table th:nth-child(3)  {
        display:none;
    }
}

HTML：

<table class="table table-striped table-hover">
   <thead>
      <tr>
         <th>Name</th>
         <th class="">Type</th>
         <th class="">IMO</th>
         <th>Created</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let report of reports">
         <td>{{report.name}}</td>
         <td class="">{{report.type}}</td>
         <td class="">{{report.imo}}</td>
         <td>{{report.reportCreated | date: 'dd-MM-yyyy'}}</td>  
      </tr>
   </tbody>
</table>