Trying to align column heading with rows below it - css

Question

I'm trying to align the column heading with the rows below it but the column headings appear slightly to the right. I tried removing margin and removing the overflow auto from the row below the heading but that does not work. How can align the column heading with the rows below it? Thank you.
full code at this codepen.
These columns appear slightly to the right
<div class="row" style="background-color: yellow;">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
</div>
These appear correctly.
<div id="data-row">
<div class="row" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder" style="width: 100%;">
<div class="col-4">{{birds.ID}}</div>
<div class="col-4">{{birds.Name}}</div>
<div class="col-4">{{birds.Type}}</div>
</div>
</div>

Answer 1

You need no-gutters on both the row with the headings and the rows with the data and you don't need the width: 100% on the #data-row.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
.container {
border: 1px solid black;
}
.content {
padding: 5px;
width: 100%;
}
#data-row {
/*width: 100%; */
min-height: 200px;
max-height: 500px;
overflow: auto;
}
.row:nth-child(even) {
background: #CCC
}
.row:nth-child(odd) {
background: #FFF
}
.row .section-header {
padding: 5px !important;
background-color: #7C9DB9 !important;
}
.header-span {
color: #fff;
margin-right: .7em;
cursor: pointer;
font-size: 1.5em;
}
.span-active {
border-bottom: solid 1px #fff;
}
.col-4 {
border: solid 1px red;
}
.overflow-y {
overflow-y: scroll;
}
</style>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
<div class="col-12">
<span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
{{tab.label}}
</span>
</div>
</div>
<label>Search: <input ng-model="searchText"></label>
<div class="row no-gutters overflow-y" style="background-color: yellow;">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
</div>
<div id="data-row">
<div class="row no-gutters overflow-y" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder">
<div class="col-4">{{birds.ID}}</div>
<div class="col-4">{{birds.Name}}</div>
<div class="col-4">{{birds.Type}}</div>
</div>
</div>
</div>
</div>

Answer 2

Another way to go would be to use a table rather than rows and columns. Bootstrap-table is an extension can create a table for you where the columns align and you can have a scrollbar to scroll through the data. Bootstrap-table can also handle the search function and sorting the table by a column. You can have the table either hard coded into your page or you can build the table from a JSON file.
Bootstrap-table is being actively maintained, but they are a few version behind on Bootstrap 4 (they’re running 4.3.1 rather than 4.6.0).
I have replaced Bootstrap-table’s arrows for sorting columns as theirs (I believe) lack sufficient contrast).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<style>
.bootstrap-table {
margin-bottom: 1rem;
}
.bootstrap-table .fixed-table-container .table thead th .th-inner {
padding: 0.25rem;
}
.table td,
.table th {
padding: 0 0.25rem;
}
.bootstrap-table .fixed-table-container .table thead th .both {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
.bootstrap-table .fixed-table-container .table thead th .asc {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
.bootstrap-table .fixed-table-container .table thead th .desc {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
</style>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
<div class="col-12">
<span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
{{tab.label}}
</span>
</div>
</div>
<label>Search: <input ng-model="searchText"></label>
<table class="table table-bordered mb-5" data-toggle="table" data-search="true" data-height="468" data-show-columns="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Bird Name</th>
<th data-field="type" data-sortable="true">Type of Bird</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>2</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<th>3</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>4</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>5</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>6</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>7</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>8</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>9</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>10</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>11</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>12</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>13</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>14</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>15</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>16</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>17</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>18</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>19</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>20</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>21</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>22</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>23</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>24</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>25</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>26</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>27</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>28</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>29</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>30</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>31</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>32</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>33</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>34</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>35</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>36</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>37</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>38</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>39</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>40</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
</tbody>
</table>
</div>
</div>