h5页面编写原生table表格，并调整表格样式？

 如上图所示，是使用原生table标签编写的表格，使用原生table标签需要注意以下几点：1）标题不折行；2）表头样式修改；3）每行样式修改；4）内容超出折行显示

代码如下：

<!-- tableList为表格数据 -->

<table width="100%" class="table">
  <tr style="background-color: rgba(242, 242, 242, 0.8);">
    <th width="10%"></th>
    <th width="60%">能力名称</th>
    <th width="30%">调用次数</th>
  </tr>
  <tr v-for="item,index in tableList" :key="index">
    <td>{{ index + 1 }}</td>
    <td>{{ item.capaName || '暂无' }}</td>
    <td>{{ item.mount || 0 }}</td>
  </tr>
</table>

.table{
  margin-top: 0.8rem;
  font-size: 0.9rem;
  table-layout: fixed;
  word-wrap: break-word;
  border-collapse: collapse;
  tr{
    border-bottom: 0.1rem solid rgb(241, 238, 238);//每行使用细线隔开
    line-height: 2rem;//编写行高使撑开每行间距
    td:nth-child(1){
      text-align: center;//文字内容居中
    }
    td:nth-child(3){
      text-align: center;//文字内容居中
    }
  }
}

前端小白积累经验篇~