Я не думаю, что это возможно сделать с границей. Но вы можете имитировать границу c, используя псевдоэлементы ::after и ::before:
Первое: удалить значение по умолчанию bootstrap border:
.table tbody td, .table tbody th {
border: none;
}
Затем добавить положение относительно таблицы строка:
.table tbody tr {
position: relative;
}
А теперь добавьте псевдоэлемент:
.table tbody tr::after {
display: block;
content: '';
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #dee2e6;
position: absolute;
z-index: 4;
}
Результат:
.table-responsive {
height: 500px;
}
thead {
position: sticky;
top: 0px;
background: white;
/* removing background color allow border to appear (though not perfectly) but then the sticky behavior doesn't quite work */
z-index: 3;
}
.sticky-col-top {
position: sticky;
left: 0px;
top: 0px;
max-width: 6em;
min-width: 6em;
background: white;
background-clip: padding-box;
z-index: 3;
}
.weekday-row {
border-top: 3px solid #E2E2E2;
}
.sticky-col {
position: sticky;
left: 0px;
width: 6em;
background: white;
background-clip: padding-box;
border-bottom: 1px solid #E2E2E2;
font-weight: normal;
font-size: 14px;
z-index: 2;
}
.table tbody td, .table tbody th {
border: none;
}
.table tbody tr {
position: relative;
}
.table tbody tr::after {
display: block;
content: '';
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #dee2e6;
position: absolute;
z-index: 4;
}
td:nth-child(even),
th:not(.days):nth-child(even) {
background: #F7F7F7;
}
.days {
color: #606060;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table calendar">
<thead>
<tr>
<th class="sticky-col-top"></th>
<th class="days">1</th>
<th class="days">2</th>
<th class="days">3</th>
<th class="days">4</th>
<th class="days">5</th>
<th class="days">6</th>
<th class="days">7</th>
<th class="days">8</th>
<th class="days">9</th>
<th class="days">10</th>
</tr>
<tr>
<th class="sticky-col-top"></th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
<th class="weekday-row">T</th>
<th class="weekday-row">F</th>
<th class="weekday-row">S</th>
<th class="weekday-row">S</th>
<th class="weekday-row">M</th>
<th class="weekday-row">T</th>
<th class="weekday-row">W</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<th class="sticky-col">
<div>Title 1</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 2</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 3</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 4</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 5</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 6</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 7</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 8</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 9</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<th class="sticky-col">
<div>Title 10</div>
</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</tbody>
</table>
</div>