Currently in the process of learning, I am encountering an issue with a Bootstrap table. Specifically, I am trying to center the two columns (trucks and cars) as shown on this image:
https://i.sstatic.net/iAqeG.png
The goal is to have the trucks and cars centered so that when more are added, they remain centered. Additionally, the empty row needs to be removed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Trucks / Cars</th>
<th scope="col">Lorem 1</th>
<th scope="col">Lorem 2</th>
<th scope="col">Lorem 3</th>
<th scope="col">Lorem 4</th>
<th scope="col">Lorem 5</th>
<th scope="col">Lorem 6</th>
<th scope="col">Lorem 7</th>
<th scope="col">Lorem 8</th>
<th scope="col">Lorem 9</th>
<th scope="col">Lorem 10</th>
<th>Lorem 11</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trucks</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="592">
<th scope="row"></th>
<td>Title 1</td>
<td>Title 2.</td>
<td>1</td>
<td>1</td>
<td>MTitle 3</td>
<td>title 5</td>
<td>title</td>
<td>some</td>
<td>01.10.2020</td>
<td>15.10.2020</td>
<td>
</td>
</tr>
<tr style="border-top: 2px solid #006171">
<td>Cars</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="592">
<th scope="row"></th>
<td>Title 1</td>
<td>Title 2.</td>
<td>1</td>
<td>1</td>
<td>MTitle 3</td>
<td>title 5</td>
<td>title</td>
<td>some</td>
<td>01.10.2020</td>
<td>15.10.2020</td>
<td>
</td>
</tr>
</tbody>
</table>I am still relatively new at this, so any assistance would be greatly appreciated.