1

I want to hide specific columns in a table on all other screen than XL. It seems like the approach below does not work for table cells. Is there other ways to do this? 

<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>

enter image description here

Thomas Segato
  • 4,567
  • 11
  • 55
  • 104
  • You might want to check [this](https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4) – suvojit_007 Oct 10 '18 at 09:14

1 Answers1

2

Bootstrap solution

Here is a Fiddle with the Bootstrap solution.

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>

Solution without Bootstrap

Here is a Fiddle where you can select a screen size.

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>
MrMaavin
  • 1,611
  • 2
  • 19
  • 30