CSS标题在左侧列的table

不要想复杂了，其实就是不需要tr了 所有的都是td 然后给奇数列或者偶数列加样式即可。

html:

<div class="table-wrapper">
      <table class="main-table" cellspacing="0" cellpadding="0">
        <tr>
          <td>业务类型:</td>
          <td>{
   
   { detailData.bizType }}</td>
          <td>业务子类型:</td>
          <td>{
   
   { detailData.bizTypeSub }}</td>
          <td>费用类型:</td>
          <td>{
   
   { detailData.feeType }}</td>
          <td>任务ID:</td>
          <td>{
   
   { detailData.id }}</td>
          <td>申请单ID:</td>
          <td>{
   
   { detailData.applyId }}</td>
        </tr>
        <tr>
          <td>单据类型:</td>
          <td>{
   
   { detailData.invoiceType }}</td>
          <td>发票抬头:</td>
          <td>{
   
   { detailData.invoiceTitle }}</td>
          <td>开票主体:</td>
          <td>{
   
   { detailData.companyName }}</td>
          <td>申请金额:</td>
          <td>{
   
   { detailData.invoiceAmount }}</td>
          <td>审批提交原因:</td>
          <td>{
   
   { detailData.applyReason }}</td>
        </tr>
        <tr>
          <td>所有审批人:</td>
          <td>{
   
   { detailData.allPsr }}</td>
          <td>实际审批人:</td>
          <td>{
   
   { detailData.psr }}</td>
          <td>申请人:</td>
          <td>{
   
   { detailData.applyer }}</td>
          <td>审批状态:</td>
          <td>{
   
   { detailData.state }}</td>
          <td>审批时间:</td>
          <td>{
   
   { detailData.oprateTime }}</td>
        </tr>
        <tr>
          <td>审批驳回或者通过原因:</td>
          <td>{
   
   { detailData.operateReason }}</td>
          <td>审批状态:</td>
          <td>{
   
   { detailData.state }}</td>
          <td>审批创建时间:</td>
          <td>{
   
   { detailData.createdTime }}</td>
          <td>最后操作人:</td>
          <td>{
   
   { detailData.editor }}</td>
          <td>最后操作时间:</td>
          <td>{
   
   { detailData.modifiedTime }}</td>
        </tr>
      </table>
    </div>

css:

  .table-wrapper {
    padding: 0 15px;
      .main-table {
      width: 100%;
      border-top: 1px solid #E6EAEE;
      border-left: 1px solid #E6EAEE;
   }

   .main-table tr td {
      /*width: 200px;
      line-height: 35px;*/
      height: 35px;
      box-sizing: border-box;
      padding: 10px  0 10px 5px;
      border-bottom: 1px solid #E6EAEE;
      border-right: 1px solid #E6EAEE;
      font-weight: bold ;
   }

    .main-table tr :nth-child(2n+0) {
      background-color: #EFF3F6;
      color: #393C3E;
      font-weight: normal;
      // width: 140px;
   }

   .main-table tr:hover{
      background-color: #EFF3F6;
   }
  }

效果如下：