Создание двухстрочного заголовка таблицы в 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. Утилита начальной загрузки границ

Вы также можете использовать служебный класс начальной загрузки для удаления границ: 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/