bootstrap 4 responsive table - html

Question

Hey i've got the following problem when i am trying to use the bootsrap 4 responsive table.
If there isnt evenough in the table to fill the complete width its look like this.
Layout of Table
My code is the following:
<div class="container" id="maincontainer">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Bevorstehende Veranstaltungen:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>Vergangene Veranstaltungen:</p>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">30.06.2017 15:30 - 16:00</th>
<td>2/2</td>
<td>dafdfsfa</td>
<td>97</td>
</tr>
</tbody>
</table>
</div>
I hope anyone can help me.
Best Regards
Alex

Answer 1

That's because you have 2 separate tables with 2 different lengths of text in the first column. The only way I can think to make the first columns exactly the same width is to have the exact same amount of characters in them, i.e. add a date and time stamp to the first table.

Answer 2

You can set width in js also, give same width
like
$('.table').dataTable( {
"columnDefs": [
{ "width": "30%" },
{ "width": "20%" },
{ "width": "20%" },
{ "width": "30%" },
]
} )

Answer 3

In bootstrap table, the width of the column will be depends on the data.
If you want columns on both table as same width, I think the <div> may be useful instead of Table.
<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
<div class="col-md-3">
<b>#</b>
</div>
<div class="col-md-3">
<b> First Name</b>
</div>
<div class="col-md-3">
<b> Last Name</b>
</div>
<div class="col-md-3">
<b>Username</b>
</div>
</div>
<br />
<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
<div class="col-md-3">
<b>#</b>
</div>
<div class="col-md-3">
<b> First Name</b>
</div>
<div class="col-md-3">
<b> Last Name</b>
</div>
<div class="col-md-3">
<b>Username</b>
</div>
</div>
<div class="row primary-bordered-table">
<div class="col-md-3">
30.06.2017 15:30 - 16:00
</div>
<div class="col-md-3">
2/2
</div>
<div class="col-md-3">
dafdfsfa
</div>
<div class="col-md-3">
97
</div>
</div>
Then the column will be like in the following image