第一和第二个Bootstrap表列之间的大空白

Question

如何删除“名称”列和包含24个字母的第一个日期列之间的大空白？

它似乎是由Bootstrap CSS引起的，但我不确定为什么。

当日历中有更多可用日期时，基于我的基础模型，问题就消失了，但我正在努力找出原因。

 #container-body { padding-bottom: 1rem; padding-top: 1rem; } #locala-oc { height: 30px; padding-right: 1rem; } table.dt-table { border-spacing: 0; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center; margin: 0; } nav { border-bottom: 1px solid #792273; } .form-text-bottom { display: block; margin-bottom: 0.5rem; } thead.remove-header-top > tr > th { border-top: 0; padding-top: 0; } tr.table-striped-odd { background-color: rgba(0, 0, 0, 0.05); } .validation-summary-errors ul { list-style: none; } .stock-card { height: 220px; } .stock-card-header { height: 80px; vertical-align: middle; } #calendar th, #calendar td { white-space: nowrap; } #calendar th.name, #calendar td.name { background: white; position: absolute; margin-left: -200px; width: 200px; } .calendar-wrapper { overflow-x: scroll; width: 100%; } #calendar { table-layout: fixed; margin-left: 200px; } #calendar col.day, #calendar th.day, #calendar td.day { width: 40px; text-align: center; } #calendar > thead > tr > th.weekend, #calendar > tbody > tr > td.weekend { background: lightgray; } #calendar > tbody > tr > td.user-rt { background-color: #792273; } #calendar > tbody > tr > td.user-al { background-color: darkgray; } #calendar > tbody > tr > td.user-rt.user-al { background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, red), color-stop(50%, green)); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <div class="calendar-wrapper"> <table id="calendar" class="table table-bordered"> <colgroup> <col class="name"> <col class="day" data-date="20171124"> <col class="day weekend" data-date="20171125"> <col class="day weekend" data-date="20171126"> <col class="day" data-date="20171127"> <col class="day" data-date="20171128"> <col class="day" data-date="20171129"> <col class="day" data-date="20171130"> </colgroup> <thead> <tr> <th class="name">&nbsp;</th> <th class="text-center" colspan="7">November 2017</th> </tr> <tr> <th class="name">Name</th> <th class="day" data-date="20171124">24</th> <th class="day weekend" data-date="20171125">25</th> <th class="day weekend" data-date="20171126">26</th> <th class="day" data-date="20171127">27</th> <th class="day" data-date="20171128">28</th> <th class="day" data-date="20171129">29</th> <th class="day" data-date="20171130">30</th> </tr> </thead> <tbody> <tr> <td class="name">User A</td> <td class="day user-rt" data-date="20171124" data-userid="1873"> &nbsp; </td> <td class="day weekend user-rt" data-date="20171125" data-userid="1873"> &nbsp; </td> <td class="day weekend user-rt" data-date="20171126" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171127" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171128" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171129" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171130" data-userid="1873"> &nbsp; </td> </tr> </tbody> </table> </div> 

Answer 1

您的table的宽度为100％。 将其更改为width: auto

 #container-body { padding-bottom: 1rem; padding-top: 1rem; } #locala-oc { height: 30px; padding-right: 1rem; } table.dt-table { border-spacing: 0; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center; margin: 0; } nav { border-bottom: 1px solid #792273; } .form-text-bottom { display: block; margin-bottom: 0.5rem; } thead.remove-header-top > tr > th { border-top: 0; padding-top: 0; } tr.table-striped-odd { background-color: rgba(0, 0, 0, 0.05); } .validation-summary-errors ul { list-style: none; } .stock-card { height: 220px; } .stock-card-header { height: 80px; vertical-align: middle; } #calendar th, #calendar td { white-space: nowrap; } #calendar th.name, #calendar td.name { background: white; position: absolute; margin-left: -200px; width: 200px; } .calendar-wrapper { overflow-x: scroll; width: 100%; } #calendar { table-layout: fixed; margin-left: 200px; } #calendar col.day, #calendar th.day, #calendar td.day { width: 40px; text-align: center; } #calendar > thead > tr > th.weekend, #calendar > tbody > tr > td.weekend { background: lightgray; } #calendar > tbody > tr > td.user-rt { background-color: #792273; } #calendar > tbody > tr > td.user-al { background-color: darkgray; } #calendar > tbody > tr > td.user-rt.user-al { background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, red), color-stop(50%, green)); } .table{ width: auto !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <div class="calendar-wrapper"> <table id="calendar" class="table table-bordered"> <colgroup> <col class="name"> <col class="day" data-date="20171124"> <col class="day weekend" data-date="20171125"> <col class="day weekend" data-date="20171126"> <col class="day" data-date="20171127"> <col class="day" data-date="20171128"> <col class="day" data-date="20171129"> <col class="day" data-date="20171130"> </colgroup> <thead> <tr> <th class="name">&nbsp;</th> <th class="text-center" colspan="7">November 2017</th> </tr> <tr> <th class="name">Name</th> <th class="day" data-date="20171124">24</th> <th class="day weekend" data-date="20171125">25</th> <th class="day weekend" data-date="20171126">26</th> <th class="day" data-date="20171127">27</th> <th class="day" data-date="20171128">28</th> <th class="day" data-date="20171129">29</th> <th class="day" data-date="20171130">30</th> </tr> </thead> <tbody> <tr> <td class="name">User A</td> <td class="day user-rt" data-date="20171124" data-userid="1873"> &nbsp; </td> <td class="day weekend user-rt" data-date="20171125" data-userid="1873"> &nbsp; </td> <td class="day weekend user-rt" data-date="20171126" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171127" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171128" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171129" data-userid="1873"> &nbsp; </td> <td class="day user-rt" data-date="20171130" data-userid="1873"> &nbsp; </td> </tr> </tbody> </table> </div>