JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<table class="table table-dark table-hover">
<thead class="thead-dark">
<tr class="d-flex">
<th class="col-4" scope="col">Название </th>
<th class="col-3" scope="col">Тип </th>
<th class="col-2" scope="col">Автор </th>
<th class="col-3" scope="col">
<div class="btn-toolbar mb-3 justify-content-center">
<a class="btn btn-warning btn-sm mr-1" [routerLink]='["add"]' *ngIf="permissionService.canUpload()"
role="button">Добавить</a>
</div>
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let entity of paginator?.currentPageItems">
<tr class="d-flex">
<td class="col-4">
{{entity?.name}}
</td>
<td class="col-3">
{{entity?.type.name}}
</td>
<td class="col-2">
{{entity?.owner.login}}
</td>
<td class="col-3">
<div class="btn-toolbar mb-3 justify-content-center" *ngIf="entity.id>0">
<button class="btn btn-primary btn-sm mr-1" (click)="onDownloadClick(entity)">Скачать</button>
<button class="btn btn-primary btn-sm mr-1" [routerLink]="['browser', entity.id]">Подробнее</button>
<button class="btn btn-primary btn-sm mr-1" (click)="onDescriptionClick(entity)">Описание</button>
</div>
</td>
</tr>
</ng-container>
<ng-container *ngFor="let entity of paginator?.currentPageItems">
<tr...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}