Style for 2 line header

May 17, 2022

i have a html table with two lines as header. I use the second row for a filter drop down. so it is empty in the table itself.

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

Now I wanna show only the inner vertical borders and a bottom border for the header. Therefore I use this:

    .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;
        }

Border width is set to 1px and border-collapse:collapse is also set.
But somehow I can draw a bottom line below the header (only below the second header line).
i already tried:

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

and

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

without success.

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

Who can help me out?

Regards

>Solution :

Here you are having several lack:

You must add border to th not the tr
You must add the type of line you want and the color

You tried wrong css path here:

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

As tr is place before thead nothing will happen and solid or color which is the problem of your second try.

So you will have something like:

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

After that if you want to remove the space between the border just set:

table{
  border-collapse: collapse;
}

DEMO

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