在HTML中制作两行表格标题

Question

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

<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-primary具有相同的颜色。到目前为止，我都没有运气。我正在使用红色设置底部和顶部边框的样式，但是它们未显示在页面中：

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

我还没有找到有关将两者合并或重叠的信息。

Answer 1

首先，即使将border-bottom-color样式放在行上，它也不会显示在页面上，因为引导程序会在<th>和<td>上而不是在顶部和底部放置边框<tr>。

如果将边框底色移到<th> 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>

您将看到红色底边框：

无论如何，这与您的问题或您尝试达成的目标无关。

1。使用CSS

有很多方法可以得到想要的东西，但是简单的方法就是通过CSS摆脱上下边界。

CSS

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

结果

小提琴： http://jsfiddle.net/aq9Laaew/258054/

2。引导程序边框实用程序类

您还可以使用bootstrap实用程序类删除边框：https://getbootstrap.com/docs/4.1/utilities/borders/

HTML

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

小提琴： http://jsfiddle.net/aq9Laaew/258060/