table表格细边框样式 CSS

表格结构如下：

<table class="table-style">
  <tr>
    <td class="title-td">姓名</td>
    <td class="value-td">aaa</td>
  </tr>
  <tr>
    <td class="title-td">年龄</td>
    <td class="value-td">20</td>
  </tr>
  <tr>
    <td class="title-td">地址</td>
    <td class="value-td">北京</td>
  </tr>
</table>

表格每行tr的高度，背景颜色，边框等样式根据自己需求设置
css 样式如下：

.table-style {
  border: 1px solid #e4eef7;
  border-collapse: collapse;
  tr {
    height: 40px;
  }
  td {
    border: 1px solid #e4eef7;
  }
  .title-td {
    width: 118px;
    background-color: #f1f8fb;
    text-align: center;
    color: #333;
  }
  .value-td {
    width: 212px;
    padding-left: 16px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }
}

效果图如下：