html/css how to put border on thead tr

Question

I want to put a border on the bottom of tr of thead.

I have table like below. I was able to put border on bottom of ths. However, this is short of what I wanted, because where two borders across each other is still not black as shown in the image below.

table {
    border-collapse: collapse;
}
table thead tr th {
  border-bottom: 1px solid #000000;
}

table th,
table td {
  border: 1px solid #d9d9d9;
}

<table>
  <thead>
    <tr>
      <th>
        #
      </th>
      <th>
        Date
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        TUB1234
      </td>
      <td>
        2018/02/22
      </td>
    </tr>
  </tbody>
</table>

Answer 1

it seems to me to be a bug, my solution/ fix with angular/ material-version 12.0.2:

 .full-size {
  width: 100%;

  thead {
    tr {
      td:first-child {
        padding-left: 24px;
        div:first-child {

        }
      }
      td {
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        div {
          font-size: 0.95rem;
          font-weight: bolder;
        }
      }
    }
  }

  .checkbox {
    padding-left: 4px;
  }
}

  <div>
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 full-size" #table>
      <ng-container matColumnDef="title">
        <td mat-header-cell *matHeaderCellDef mat-sort-header>Title</td>
        <td mat-cell *matCellDef="let row;">{{row.title}}</td>
      </ng-container>
      <ng-container matColumnDef="created">
        <td mat-header-cell *matHeaderCellDef mat-sort-header>Created</td>
        <td mat-cell *matCellDef="let row;">{{row.created | date:'d.MM.YYYY'}}</td>
      </ng-container>
      <ng-container matColumnDef="producer">
        <td mat-header-cell *matHeaderCellDef mat-sort-header>Producer</td>
        <td mat-cell *matCellDef="let row;">{{row.producer}}</td>
      </ng-container>
      <ng-container matColumnDef="director">
        <td mat-header-cell *matHeaderCellDef mat-sort-header>Director</td>
        <td mat-cell *matCellDef="let row;">{{row.director}}</td>
      </ng-container>
      <ng-container matColumnDef="isFavouritMovie">
        <td mat-header-cell *matHeaderCellDef mat-sort-header>Your favourit?</td>
        <td mat-cell *matCellDef="let row;" class="checkbox">
          <mat-checkbox [(ngModel)]="row.isFavouritMovie">
          </mat-checkbox>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
      </tr>
    </table>

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

Answer 2

Let's get funky...

thead, tbody, tfoot and tr don't really show their styling... (insert link to documentation explaining why).

In the meantime, you can change their display value to block, which will enable displaying styling (in your case, borders).

E.g.

table, table * {
  border: 1px solid blue;
  padding: 5px;
  margin: 5px;
}
th, td { 
  background: blue;
}
thead, tbody, tfoot {
  background: red;
}
tr {
  background: lime;
}
thead, tbody, tfoot, tr {
  display: block !important;
}

<table>
  <thead><tr><th>foo</th><th>foo</th></tr></thead>
  <tbody><tr><td>foo</td><td>foo</td></tr></tbody>
  <tfoot><tr><td>foo</td><td>foo</td></tr></tfoot>
</table>

Answer 3

Here is a working example:
(Note that I corrected the multiple trs, I suppose it was a mistake.)
I used rgba colors for the borders of th and td.

table{
    border-collapse: collapse;
}
table thead tr th{
    border-bottom: 1px solid #000000;
}
table th, table td {
    border-left: 1px solid rgba(0,0,0,0.2);
    border-right: 1px solid rgba(0,0,0,0.2);
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}

<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

Here is another snippet.
I don't know if there a way to change it, but it displays which borders are above the others, using your example:

table{
    border-collapse: collapse;
}
table th, table td { /* Multicolored border */
    border: 1px solid;
    border-color: #f00 #0f0 #00f #f0f;
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}

<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

Hope this helps.