0
名前列と24を含む最初の日付列の間の大きな空白を削除するにはどうすればよいですか？第1ブートストラップテーブルと第2ブートストラップテーブルの間の大きな空白文字
これは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"> </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">
</td>
<td class="day weekend user-rt" data-date="20171125" data-userid="1873">
</td>
<td class="day weekend user-rt" data-date="20171126" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171127" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171128" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171129" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171130" data-userid="1873">
</td>
</tr>
</tbody>
</table>
</div>
にそれを変更しますか？ – Gattbha
水平にスクロールするときにその列が表示されるようにする – mheptinstall