html - 第一个和第二个 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

您的表格 的宽度为 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>