Создание заголовка двухстрочной таблицы в 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-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>
И я не нашел никакой информации ни о слиянии этих двух, ни о том, что одно перекрывает другое.
Попробуйте использовать эти атрибуты в таблице: <table cellspacing = "0" cellpadding = "0" border = "0"> Или в css поместите это в таблицу: border-spacing: 0; граница-коллапс: коллапс;
Ответы 1
Во-первых, даже если вы поместите стиль border-bottom-color в строки, он не будет отображаться на странице, потому что bootstrap помещает верхнюю и нижнюю границы на <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 border
Вы также можете использовать служебный класс начальной загрузки для удаления границ: 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/
попробуйте создать скрипку, затем поместите ссылку здесь, чтобы мы могли увидеть вашу проблему