please check out this: https://jsfiddle.net/desytec/73qdtejg/1/#&togetherjs=w3lvLQi0v6
This displays the following table definition:
<table id="semana" class="table table-striped dt-responsive table-bordered display nowrap table-hover mb-0 mr-0" style="width: 60%;">
<thead>
<tr>
<th style="width: 40%"><div class="checkbox d-inline m-0 p-0"><input id="chkSem_0" type="checkbox"><label for="chkSem_0" class="cr mb-0">Day</label></div></th>
<th class="text-center" style="width: 30%">Start Time</th>
<th class="text-center" style="width: 30%">End Time</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="checkbox d-inline m-0 p-0"><input id="chkSem_1" type="checkbox"><label for="chkSem_1" class="cr mb-0">Monday</label></div></td>
<td>
<input class="form-control" id="HoraInicio" maxlength="5" name="HoraInicio" style="display: inline; width: 80%" type="text" value="12:47">
</td>
<td>
<input class="form-control" id="HoraTermino" maxlength="5" name="HoraTermino" style="display: inline; width: 80%" type="text" value="12:47">
</td>
</tr>
<tr>
<td><div class="checkbox d-inline m-0 p-0"><input id="chkSem_2" type="checkbox"><label for="chkSem_2" class="cr mb-0">Tuesday</label></div></td>
<td>
<input class="form-control" id="HoraInicio" maxlength="5" name="HoraInicio" style="display: inline; width: 80%" type="text" value="12:47">
</td>
<td>
<input class="form-control" id="HoraTermino" maxlength="5" name="HoraTermino" style="display: inline; width: 80%" type="text" value="12:47">
</td>
</tr>
<tr>
<td><div class="checkbox d-inline m-0 p-0"><input id="chkSem_3" type="checkbox"><label for="chkSem_3" class="cr mb-0">Wednesday</label></div></td>
<td>
<input class="form-control" id="HoraInicio" maxlength="5" name="HoraInicio" style="display: inline; width: 80%" type="text" value="12:47">
</td>
<td>
<input class="form-control" id="HoraTermino" maxlength="5" name="HoraTermino" style="display: inline; width: 80%" type="text" value="12:47">
</td>
</tr>
... (remaining code omitted for brevity) ...
</tbody>
</table>
The table displayed needs to be centered horizontally, but my attempts have been unsuccessful. I noticed a large margin to the right of the table that needs to be removed in order to center it properly.
I have tried inspecting the table with Google Chrome's developer tools, but I couldn't identify which class is causing the right margin. I added "mr-0" to the table class without success.
Any guidance on this issue would be appreciated.
Thank you,
Jaime