Стиль для двухстрочного заголовка

у меня есть таблица html с двумя строками в качестве заголовка. Я использую вторую строку для раскрывающегося списка фильтров. поэтому в самой таблице пусто.

    <table class="tg wrap stripe" id="tableData">
        <thead>
            <tr>
                <th class="header-left">Name</th>
                <th class="header-left">Position</th>
                <th class="header-left">Office</th>
                <th class="header-center">Age</th>
                <th class="header-center">Start date</th>
                <th class="header-right">Salary</th>
            </tr>
            <tr>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-left"></th>
                <th class="header-center"></th>
                <th class="header-center"></th>
                <th class="header-right"></th>
            </tr>
        </thead>
        <tbody>
            <tr> ... </tr>
            ...

Теперь я хочу показать только внутренние вертикальные границы и нижнюю границу заголовка. Поэтому я использую это:

    .tg tr  td:first-child, th:first-child{
            border-left: none;
        }
    .tg tr  td:last-child, th:last-child{
            border-right: none;
        }
    .tg tr td, th {
            border-right: none;
            border-top: none;
            border-bottom: none;
        }

Ширина границы установлена ​​​​на 1px, а также установлена ​​border-collapse:collapse. Но каким-то образом я могу нарисовать нижнюю строку ниже заголовка (только ниже второй строки заголовка). я уже пробовал:

    .tg tr thead:last-child{
            border-bottom: 1px;
            }

и

    .tg tr th:last-child{
            border-bottom: 1px;
            }

безуспешно.

.tg tr td:first-child, th:first-child{
  border-left: none;
}
.tg tr td:last-child, th:last-child{
  border-right: none;
}
.tg tr td, th {
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.tg tr thead:last-child{
  border-bottom: 1px;
}
.tg tr th:last-child{
  border-bottom: 1px;
}
<table class="tg wrap stripe" id="tableData">
  <thead>
    <tr>
      <th class="header-left">Name</th>
      <th class="header-left">Position</th>
      <th class="header-left">Office</th>
      <th class="header-center">Age</th>
      <th class="header-center">Start date</th>
      <th class="header-right">Salary</th>
    </tr>
    <tr>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-center"></th>
      <th class="header-center"></th>
      <th class="header-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr> ... </tr>
  </tbody>
</table>

Кто может мне помочь?

С уважением

Не могли бы вы показать правильный минимальный воспроизводимый пример проблемы вместо этих фрагментов.

CBroe 17.05.2022 15:21

Это .tg tr thead:last-child{ border-bottom: 1px; } не сработает, если вы попытаетесь установить tr раньше thead

MaxiGui 17.05.2022 15:39
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
2
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь у вас есть несколько недостатков:

  • Вы должны добавить границу к th, а не к tr
  • Вы должны добавить нужный тип линии и цвет

Вы попробовали неправильный путь css здесь:

.tg tr thead:last-child{
   border-bottom: 1px;
}

Поскольку tr стоит перед thead, ничего не произойдет, а solid или color это проблема второй попытки.

Итак, у вас будет что-то вроде:

.tg thead tr:last-child th{
  border-bottom: 1px solid black;
}

После этого, если вы хотите удалить пространство между только что установленной границей:

table{
  border-collapse: collapse;
}

ДЕМО

.tg tr td:first-child, th:first-child{
  border-left: none;
}
.tg tr td:last-child, th:last-child{
  border-right: none;
}
.tg tr td, th {
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.tg thead tr:last-child th{
  border-bottom: 1px solid black;
}
<table class="tg wrap stripe" id="tableData">
  <thead>
    <tr>
      <th class="header-left">Name</th>
      <th class="header-left">Position</th>
      <th class="header-left">Office</th>
      <th class="header-center">Age</th>
      <th class="header-center">Start date</th>
      <th class="header-right">Salary</th>
    </tr>
    <tr>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-left"></th>
      <th class="header-center"></th>
      <th class="header-center"></th>
      <th class="header-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr> ... </tr>
  </tbody>
</table>

Другие вопросы по теме