Question

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

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

Answer 1

请添加如下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;
}

Answer 2

要删除边框，请在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;
}

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

Answer 4

尝试这个...

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>

Answer 5

备用行颜色：

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

删除边框线并为其他表格行分配颜色？

5 个答案: