如何删除此页边空白?

问题描述 投票:0回答:1

请参阅: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

css bootstrap-4
1个回答
0
投票

您可以使用此表格样式:

table{
width: 50%; // or can define fix width like 400 or 500 px
margin-left: auto;
margin-right: auto;
}
© www.soinside.com 2019 - 2024. All rights reserved.