Problem with a Bootstrap 4 table inside a card - html

Question

This is my problem
As u see, i dont know why the table get that format inside the card.
I need the table to be centered or at least not show that blank space that shows at this time. ... this is my code(im using angular 6)
<div class="row">
<div class="col-md-6">
<div class="header">
<h4 style="padding:10px" class="title">Dispositivo de Ejecucion</h4>
</div>
<div>
<table class="table table-bordered table-condensed table-responsive ">
<thead class="thead-dark">
<tr>
<th>Marca</th>
<th>Sistema Operativo</th>
<th>Version</th>
<th>Modelo</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{dispositivoCdp[0].nombredispositivo}}</td>
<td>{{dispositivoCdp[0].sistema_operativo}}</td>
<td>{{dispositivoCdp[0].version}}</td>
<td>{{dispositivoCdp[0].modelo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6 justify-content-center">
<div class="header">
<h4 style="padding:10px" class="title">Tiempo de Ejecucion</h4>
</div>
<table class=" table table-bordered table-responsive ">
<thead class="thead-dark">
<tr>
<th>Inicio</th>
<th>Fin</th>
<th>Duracion</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{dispositivoCdp[0].nombredispositivo}}</td>
<td>{{dispositivoCdp[0].sistema_operativo}}</td>
<td>{{dispositivoCdp[0].version}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Have any suggestion of what im doing wrong? i try to use table-sm inside the table class but i dont geet any results

Answer 1

Use this
<table class="table table-bordered table-condensed table-responsive" style="display:table">

Answer 2

Try to delete "table-responsive" in your class.
I think that will solve your problem.

Answer 3

The problem in your code is the structure, to make a table "responsive", in Bootstrap 4, you have to insert it inside a <div> with table-responsive class, not in the table classes.
Esample:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Read the docs: https://getbootstrap.com/docs/4.6/content/tables/#responsive-tables