Question

我想创建一个具有弯曲边缘，蓝色背景颜色标题和交替背景颜色（灰色和白色）的表格。

这是我提出的css，这适用于chrome，但后来我意识到它不适用于IE或Firefox。看起来像溢出：隐藏在IE或Firefox中无效。

.curvetable  tr:nth-child(even) {
  background:#e0e0e0;
}

.curvetable th {  
      border: 1px solid gray;
      background-color: SteelBlue;
      color: white;
      padding: 1em;  
}

.curvetable td{   
      border: 1px solid gray;
      padding: .5em 1em;  
}

.curvetable th, td{
     text-align: left;
     margin: .5em 1em;   

}
.curvetable {
    margin: 1em 0;
    width: 100%;
    background: #FFF;
    color:  #024457;
    overflow: hidden;  
    border-radius: 15px;
}

我厌倦了在网上寻找例子，但我找不到任何弯曲的边缘和交替的背景颜色。有没有人有任何建议？谢谢

Answer 1

曲线

：

.curvetable tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

.curvetable tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

用于交替的背景颜色：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

标题颜色：

#customers th {
    background-color: blue;
}

创建具有交替背景颜色的弯曲表格

1 个答案: