How to make table header relative to content bootstrap? - html

Question

this is what i have:
Im using Angular and Bootstrap. Now i want to make the table header relative positioned to the text inside the container below.
I tried using a html table but sadly you cant make tables like i showed in the picture above with html tables. Currently i use bootstrap columns to align the header and the content inside the widget. Does someone know how i can like "link" the columns inside the widget with the header columns? So if for example the name column is very long, the image header gets moved to the right, aligned with the image column inside the widget.
This is my current code:
widget.component.html
<div class="widget d-flex">
<div class="row">
<div class="col d-flex text-center">
<div class="iconWrapper"></div>
<div class="textWrapper my-auto">
<p class="headingText">mongodb-1</p>
<div class="state d-flex">
<span class="stateText mx-auto">RUNNING</span>
</div>
</div>
<span class="imageText my-auto">
mongodb:latest
</span>
<span class="portText my-auto">
127.0.0.1:9090->80/tcp
</span>
</div>
</div>
</div>
containers.component.html
<div class="col-5">
<div class="row justify-content-left">
<div class="col-5">
<p class="name text-start">Name</p>
</div>
<div class="col-4">
<p class="image text-start">Image</p>
</div>
<div class="col-1">
<p class="port text-start">Ports</p>
</div>
</div>
<ng-container *ngIf="this.containerService.getContainers() != null">
<div class="row justify-content-left h-10 rowTop" *ngFor="let container of this.containerService.getContainers()">
<app-widget></app-widget>
</div>
</ng-container>
</div>

Answer 1

This is exactly why you must use either tables or grids. I don't see any reason why you can't replicate the above example using tables?
Here is the code for a sample table I created to replicate your example - I also added the whole component inside an overflown container in case it runs out of space:
HTML:
<div class="overflown-container">
<table>
<thead>
<tr>
<td> </td>
<td>Name</td>
<td>Image</td>
<td>Ports</td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://placekitten.com/48/48"></td>
<td>mongo-db-1<br><span class="label">RUNNING</span></td>
<td>mongodb:latest</td>
<td>127.0.0.1:9090->80/tcp</td>
</tr>
</tbody>
</table>
</div>
CSS:
.overflown-container {
overflow-x: auto;
}
table {
border-spacing: 0;
border-padding: 0;
}
table img {
border-radius: 5px;
}
table tbody tr td {
padding: 10px;
background: tomato;
}
table tbody tr td:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
table tbody tr td:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.label {
background: green;
color: #fff;
font-size: 12px;
padding: 5px;
border-radius: 5px;
}
Below is a working sample of more or less what you are after, adjust to your actual design:
https://jsfiddle.net/7cybnut5/2/