如何构建具有某些规格的 table

Question

不确定这是否完全合理，这是另一个尝试：

我正在尝试制作一个 table，其中每一行交替颜色的顶部两侧都有一个边框半径，这样 space（或背景）创建由于边框半径由前一行颜色填充。这是 Css:

table {
  background-color: grey;
  border-radius
  -webkit-border-radius: 10px 10px 0px 0px; 
  border-radius: 10px 10px 0px 0px; 
  border-spacing: 0;
}

td,th{
  height:28px;
}

table th{
  background-color:blue;    
}

table tr th:first-child {
  border-radius: 10px 0px 0px 0px;
}

table tr th:last-child {
  border-radius: 0px 10px 0px 0px;
}

table tr td:first-child {
  width: 200px;
}

table tr td:first-child {
   width: 200px;
}

table tr:nth-child(odd) {
  background-image: url("http://i.imgur.com/WOF6Nqu.png");
  background-repeat: no-repeat;
  padding-top:10px;
  margin-top:-10px;
}

table tr:nth-child(even) {
  background-image: url(" http://i.imgur.com/BLcmMtw.png");
  background-repeat: no-repeat;
}

table td:nth-child(1),
table td:nth-child(2),
table th:nth-child(1),
table th:nth-child(2) {
  border-right: 2px solid white;
}

Answer 1

（仅适用于 Firefox）

简单地让table个单元格具有重要的background-color，并让每一行与前一行的单元格具有相同的颜色：

https://jsfiddle.net/svArtist/20rhemuf/

（您的 header 需要一些修复，但还算不错

td:first-child, th:first-child {
    border-radius: 10px 0 0 0;
}
td:last-child, th:last-child {
    border-radius: 0 10px 0 0;
}
/* Now set the colors here */
table tr:nth-child(odd) {
    background-color: #bbb;
}
table tr:nth-child(even) {
    background-color: #ABDBEA;
}
table tr:nth-child(even) td {
    background-color: #bbb;
}
table tr:nth-child(odd) td {
    background-color: #ABDBEA;
}

/* fixes for the header, as it is different */
table tr:first-child {
    background-color: transparent;
}
table tr:nth-child(2) {
    background-color: blue;
}

如何构建具有某些规格的 table

How to build a table with some specifications

html

css

css-tables