在HTML中生成两行表格标题

我正在尝试设置一个表，使其标题为两行。在顶行，将有一个输入框，允许用户筛选表。第二行是列名。到目前为止，我能得到的最接近的结果是：

<thead>
    <tr class="bg-primary">
        <th colspan="5">
            <input id="searchBox" class="form-control" placeholder="Search by name">
        </th>
    </tr>
    <tr class="bg-primary text-white">
        <th scope="col">Name</th>
        <th scope="col">Street Address</th>
        <th scope="col">City</th>
        <th scope="col">State</th>
        <th scope="col">Phone</th>
    </tr>
</thead>

名称
街道地址
城市
陈述
电话

然而，到目前为止，我还无法找到一种方法来消除两行之间的白色边界。我想让它看起来像一个标题，所以我试图找到一种方法，要么使两行重叠，要么使它们之间的边框与bg主边框的颜色相同。到目前为止，我在这两方面都不走运。我使用红色来设置底部和顶部边框的样式，但它们不会显示在页面中：

<thead>
        <tr class="bg-primary" style="border-bottom-color: #9d063b">
            <th colspan="5">
                <input id="searchBox" class="form-control" placeholder="Search by name">
            </th>
        </tr>
        <tr class="bg-primary text-white" style="border-bottom-color: #9d063b">
            <th scope="col">Name</th>
            <th scope="col">Street Address</th>
            <th scope="col">City</th>
            <th scope="col">State</th>
            <th scope="col">Phone</th>
        </tr>
    </thead>

名称
街道地址
城市
陈述
电话

---

而且我还没有找到任何关于合并这两个或使其中一个重叠的信息。

首先，即使您在行上放置了

边框底部颜色

样式，它也不会显示在页面上，因为bootstrap将顶部和底部边框放置在

和

上，而不是

如果将边框底部颜色移动到

s：

<tr class="bg-primary">
    <th colspan="5"  style="border-bottom-color: #9d063b;">
        <input id="searchBox" class="form-control" placeholder="Search by name">
    </th>
</tr>

结果

小提琴：

2.引导边界实用程序类 您还可以使用引导实用程序类删除边框：

HTML

名称
街道地址
城市
陈述
电话

---

fiddle:

尝试创建一个fiddle，然后将链接放在这里，这样我们就可以看到您的问题在表中尝试此属性：或在css中将此属性放在表中：边框间距：0；边界塌陷：塌陷；

.table thead td,
.table thead th {
    border-top: none;
    border-bottom: none;
}

<table class="table">
    <thead>
        <tr class="bg-primary">
            <th colspan="5" class="border-bottom-0">
                <input id="searchBox" class="form-control" placeholder="Search by name">
            </th>
        </tr>
        <tr class="bg-primary text-white">
            <th scope="col" class="border-top-0">Name</th>
            <th scope="col" class="border-top-0">Street Address</th>
            <th scope="col" class="border-top-0">City</th>
            <th scope="col" class="border-top-0">State</th>
            <th scope="col" class="border-top-0">Phone</th>
        </tr>
    </thead>
</table>