0

I want to create a table that has curved edge, blue background color headers and alternating background colors (grey and white) for cells.

This is the css I came up with and this is working for chrome, but then I realized it is not working for IE or firefox. It seems like overflow: hidden is not working in IE or 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;
}

I tired to look for examples online but I couldn't find any that has curved edge and alternating background color. Does anyone has any suggestion? thanks

user638234
  • 1
  • 3
  • show your full code .. but i think it's the common issue of border-collapse and border-radius – Temani Afif Apr 27 '18 at 21:58
  • by the way look at the right of your question, you have some related questions and am pretty sure you will find what you want there – Temani Afif Apr 27 '18 at 22:06
  • possible duplicate of : https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i?rq=1 – Temani Afif Apr 27 '18 at 22:18

1 Answers1

0

for the curve: 

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

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

for the alternating background colors:

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

for the header color: 

#customers th {
    background-color: blue;
}