Bootstrap 4 Table 有一个 <h1> 标题 </h1> 我怎样才能将它作为 table 的一部分

Question

我在网页中添加了背景图片。当我创建我的 table 时，我添加了一个白色背景，这样您就可以在我的 table 中看到标题和信息。但这不包括

生成器站点

如何将“Generator Sites”作为我的一部分包含在内 Table 以便“Generator Sites”也具有白色背景？

.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 -->

Answer 1

我认为您将 h2 添加到 table 是正确的，只是调整了大小和字体粗细以使其与 h2 元素更匹配.

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/bootstrap@5.0.1/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 -->

Bootstrap 4 Table 有一个 <h1> 标题 </h1> 我怎样才能将它作为 table 的一部分

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

html-table

background-color

bootstrap-4

生成器站点