html / css如何在thead tr上放置边框

Question

我想在tr thead的底部放置一个边框。

我有下面的表格。我能够在th s的底部放置边框。但是，这远远不是我想要的，因为相互之间的两个边框仍然不是黑色，如下图所示。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个有效的例子：
（请注意，我更正了多个tr，我认为这是一个错误。）
我使用rgba颜色作为th和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>

这是另一个片段 我不知道是否有办法改变它，但它使用你的例子显示哪些边界高于其他边界：

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>

希望这有帮助。

Answer 2

在我看来这是一个错误， 我的解决方案/修复角度/材料版本 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 3

让我们变得时髦...

thead，tbody，tfoot和tr并没有真正显示其样式...（插入说明原因的文档链接）。

同时，您可以将其display的值更改为block，这将允许显示样式（在您的情况下为边框）。

例如

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>