删除边框线并为备用表格行分配颜色？答案

【问题标题】：Remove border lines and assigning color for alternate table rows?删除边框线并为备用表格行分配颜色？
【发布时间】：2019-05-29 22:56:40
【问题描述】：

我需要删除给定表格的边框线并为表格的备用行分配颜色这是代码链接：

https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css 在此先感谢

【问题讨论】：

不要将您的代码专门放在外部链接中。如果您的链接中断，这个问题将变得毫无用处，因为您不清楚您在问什么。请在问题中包含minimal reproducible example。

标签： html css angular typescript

【解决方案1】：

交替行颜色：

tr:nth-child(odd)       { background-color:#eee; }
tr:nth-child(even)      { background-color:#fff; }

【讨论】：

【解决方案2】：

试试这个……

table {
          border-collapse: collapse;
        }

        table, th, td {
          border: 1px solid black;
        }
    table, th, td {
          border: 1px solid black;
        }
    tr:nth-child(odd){
    background-color: gray;
    }

    tr:nth-child(even){
      background-color: cyan;
    }

HTML

  <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
    </table>

【讨论】：

【解决方案3】：

使用偶数和奇数子 css 为交替行着色并将边框底部宽度为零以删除边框。

https://stackblitz.com/edit/angular-pgrwjh?file=app/table-sticky-columns-example.css

td.mat-cell {
  border-bottom-width: 0px;
}
tr:nth-child(odd){
background-color: gray;
}

tr:nth-child(even){
  background-color: cyan;
}
tr.mat-header-row {
  background-color: white;
}

【讨论】：

【解决方案4】：

要删除边框，请在您的 css 中添加以下内容：

table tr,
table td {
  border: 0;
}

要为每隔一行添加一种颜色，请使用 nth-child 选择器：

table tr:nth-child(even) {
  background-color: grey;
}

您还需要从您的 css 中删除以下部分：

.mat-table-sticky:first-child {
  border-right: 1px solid #e0e0e0;
}

.mat-table-sticky:last-child {
  border-left: 1px solid #e0e0e0;
}

【讨论】：

【解决方案5】：

请添加如下CSS代码：

.mat-table-sticky:first-child {
  border-right: none;
}
td.mat-cell,
td.mat-footer-cell,
th.mat-header-cell {
  border: none;
}
tr.mat-row:nth-child(2n+1) {
  background-color: #EFEFEF;
}
tr.mat-row:nth-child(2n) {
  background-color: #C5C4C4;
}

【讨论】：