table style

by shengoo

HTML

<table class="hello">
  <thead>
    <tr>
      <th align="left">消费项目</th>
      <th align="right">一月</th>
      <th align="right">二月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left">衣服</td>
      <td align="right">$241.10</td>
      <td align="right">$50.20</td>
    </tr>
    <tr>
      <td align="left">化妆品</td>
      <td align="right">$30.00</td>
      <td align="right">$44.45</td>
    </tr>
    <tr>
      <td align="left">食物</td>
      <td align="right">$730.40</td>
      <td align="right">$650.00</td>
    </tr>
    <tr>
      <td align="left">总计</td>
      <td align="right">$1001.50</td>
      <td align="right">$744.65</td>
    </tr>
  </tbody>
</table>

CSS

.hello {
  width: 100%;
}

.hello thead tr {
  background-color: #ccc;
}

.hello tbody tr:nth-child(even) {
  background-color: #ccc;
}

.hello td,
.hello th {
  /* border-left: 2px solid #f90; */
  height: 50px;
  text-align: center;
}

.hello td:first-child,
.hello th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.hello tr td:last-child,
.hello tr th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}