Bootstrap 4 Table has a <h1> Title </h1> How can I include that as part of the table

I added a background picture to my web page. When I created my table I added a white background so you can see the headings and information in my table. But that doesn't include the

Generator Sites

How can I include the "Generator Sites" as part of my Table so the "Generator Sites" also has a white background?

.generator-list {
    overflow-y: auto;
    max-height: 30vh;
    margin-left: -275px;
    margin-right: -275px;
    /*direction: rtl;*/
}

.generator-list table {
    width:100%;
}

generator-wrapper {
    display: inline-block;
    margin-left: -275px;
    margin-right: -275px;
    padding: 0px;
    position: relative;
    width: 60vw;
    max-height: 30vh;
}

.generator-wrapper th {
    text-align: center;
}

.generator-wrapper td {
    text-align: left;
}

 <!-- Generator Sites Start-->
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="generator-wrapper text-center">
            <h2>Generator Sites</h2>
            
            <thead>
                <div class="generator-list">
                    <table id="generator-table">
                        <div class="table-responsive">
                            <table class="table table-light table-striped">
                                <thead>
                                    <tr>
                                        <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
                                        <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
                                        <th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
                                        <th> Generator Address </th>
                                        <th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
                                    </tr>
                                </thead>

                                <tbody id="generator-body">
                                </tbody>
                            </table>
                        </div>      
                    </table>
                </div>
            </thead>
        </div>  
    </div>
</div>
<!--Generator Sites Table End -->

Solution

I think you were on the right tracks by adding the h2 to the table, just tweaked the sizing and font-weight to more closely match it with the h2 element.

body {
  background: #CCFF99 !important;
}

.generator-header {
    font-size: 2em;
    font-weight: 500;
}

.generator-list {
    overflow-y: auto;
    max-height: 30vh;
    margin-left: -275px;
    margin-right: -275px;
    /*direction: rtl;*/
}

.generator-list table {
    width:100%;
}

.generator-wrapper {
    display: inline-block;
    margin-left: -275px;
    margin-right: -275px;
    padding: 0px;
    position: relative;
    width: 60vw;
    max-height: 30vh;
}

.generator-wrapper th {
    text-align: center;
}

.generator-wrapper td {
    text-align: left;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <!-- Generator Sites Start-->
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="generator-wrapper text-center">
            <h2>Generator Sites</h2>
            
            <thead>
                <div class="generator-list">
                    <table id="generator-table">
                        <div class="table-responsive">
                            <table class="table table-light table-striped">
                                <thead>
                                    <tr>
                                        <th class="generator-header" colspan="5">Generator Sites</th>
                                    </tr>
                                    
                                    <tr>
                                        <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
                                        <th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
                                        <th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
                                        <th> Generator Address </th>
                                        <th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
                                    </tr>
                                </thead>

                                <tbody id="generator-body">
                                </tbody>
                            </table>
                        </div>      
                    </table>
                </div>
            </thead>
        </div>  
    </div>
</div>
<!--Generator Sites Table End -->