[随笔] HTML/CSS-简单表格样式

一个简单的CSS表格样式

表格：

	  <div class="table-area fjcenter formating">
        <table class="my-table">
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>职位</th>
              <th>部门</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.position}}</td>
              <td>{{item.branch}}</td>
              <td>
                <a href="#">编辑</a>
                <a href="#">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

样式：

  .formating {
    margin-top: 15px;
  }
  /*flex居中，可以使表格居中，若设置了宽度100%可省略*/
  /*.fjcenter { 
    display: flex;
    justify-content: center;
  }*/
  .my-table {
    width: 100%;
    border: 1px solid black;
    /*让表格边框重合*/
    border-collapse: collapse;
    padding: 5px;
  }
  .my-table th,td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
  }
  /*奇偶数行不同背景色*/
  .my-table tr:nth-child(odd) {
    background-color: #fff;
  }
  .my-table tr:nth-child(even) {
    background-color: #ccc;
  }

ps：仅供参考，错误可提~