请参阅:https://jsfiddle.net/desytec/73qdtejg/1/#&togetherjs=w3lvLQi0v6
显示此表定义:
<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">Día</label></div></th>
<th class="text-center" style="width: 30%">Hora Inicio</th>
<th class="text-center" style="width: 30%">Hora Término</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">Lunes</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">Martes</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">Miércoles</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_4" type="checkbox"><label for="chkSem_4" class="cr mb-0">Jueves</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_5" type="checkbox"><label for="chkSem_5" class="cr mb-0">Viernes</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_6" type="checkbox"><label for="chkSem_6" class="cr mb-0">Sábado</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_0" type="checkbox"><label for="chkSem_0" class="cr mb-0">Domingo</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>
</tbody>
</table>
我需要将显示的表水平居中,但是它不起作用。我已经意识到桌子右边有一个很大的空白,我需要将其移开以便桌子可以居中。
我尝试使用Google Chrome浏览器的开发人员工具来找到该利润,但是它没有揭示哪个类增加了该利润。如您所见,我没有成功将mr-0添加到表中。
有帮助吗?
谢谢
Jaime
您可以使用此表格样式:
table{
width: 50%; // or can define fix width like 400 or 500 px
margin-left: auto;
margin-right: auto;
}