时间戳

首页 > 解决方案 > 为单元格创建具有交替背景颜色的曲线表

html - 为单元格创建具有交替背景颜色的曲线表

问题描述

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

这是我想出的 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;
}

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

标签： htmlcsshtml-table

解决方案

对于曲线： 

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

推荐阅读