Javascript——原生写table表格

studystudy。。

已于 2023-10-17 10:56:06 修改

阅读量724

点赞数

文章标签： javascript

于 2023-10-17 10:53:24 首次发布

本文链接：https://blog.csdn.net/weixin_43551242/article/details/133878961

版权

写一个6行9列的表格

<div class="power-data">
            <table class="table1 table-all" cellpadding="0" cellspacing="0">
              <!--第一行-->
              <tr>
                <th class="thBack">表格</th>
                <th class="thBack" v-for="(item,index) in branchCurrent" :key="index">{{item.name}}</th>
              </tr>
              <!--第二行-->
              <tr align="center">
                <td class="thBack">一</td>
                <td v-for="(item,index) in branchCurrent" :key="index">{{item.value?item.value:'/'}}</td>
              
              </tr>
              <!--第3行-->
              <tr align="center">
                <td class="thBack">二</td>
                <td v-for="(item,index) in branchVoltage" :key="index">{{item.value?item.value:'/'}}</td>
              </tr>
              <!--第4行-->
              <tr>
                <th class="thBack">表格</th>
                <th class="thBack" v-for="(item,index) in afterBranchCurrent" :key="index">{{item.name}}</th>
              </tr>
              <!--第二行-->
              <tr align="center">
                <td class="thBack">三</td>
                <td v-for="(item,index) in afterBranchCurrent" :key="index">{{item.value?item.value:'/'}}</td>
              </tr>
              <!--第3行-->
              <tr align="center">
                <td class="thBack">四</td>
                <td v-for="(item,index) in afterBranchVoltage" :key="index">{{item.value?item.value:'/'}}</td>
              </tr>
            </table>
            <table class="table2 table-all" cellpadding="0" cellspacing="0">
              <tr align="center">
                <td class="thBack tdLine">a</td>
                <td class="tdLine">{{abLineVoltage?abLineVoltage:'/'}}</td>
                <td class="thBack tdLine">b</td>
                <td class="tdLine">{{aphaseVoltage?aphaseVoltage:'/'}}</td>
                <td class="thBack tdLine">c</td>
                <td class="tdLine">{{aphaseCurrent?aphaseCurrent:'/'}}</td>
              </tr>
              <tr align="center">
                <td class="thBack tdLine">d</td>
                <td class="tdLine">{{bcLineVoltage?bcLineVoltage:'/'}}</td>
                <td class="thBack tdLine">e</td>
                <td class="tdLine">{{bphaseVoltage?bphaseVoltage:'/'}}</td>
                <td class="thBack tdLine">f</td>
                <td class="tdLine">{{bphaseCurrent?bphaseCurrent:'/'}}</td>
              </tr>
              <tr align="center">
                <td class="thBack tdLine">g</td>
                <td class="tdLine">{{caLineVoltage?caLineVoltage:'/'}}</td>
                <td class="thBack tdLine">h</td>
                <td class="tdLine">{{cphaseVoltage?cphaseVoltage:'/'}}</td>
                <td class="thBack tdLine">i</td>
                <td class="tdLine">{{cphaseCurrent?cphaseCurrent:'/'}}</td>
              </tr>
            </table>
          
          </div>

 .power-data {
      margin-left: 34px;

      .table-all {
        color: black;
        border: 1px solid #DEE6FC;
        border-radius: 2px 0px 0px 0px;

        .thBack {
          background: rgba(222, 230, 252, 0.4);
          border: 1px solid #DEE6FC;
        }
        .tdLine{
          line-height: 21px;
          width: 63px;
          height: 21px;

        }
        .tdBtn{
          line-height: 21px;
          width: 99px;
          height: 21px;
        }

        tr {
          text-align: center;
          font-size: 12px;
        }

        th,
        td {
          border: 1px solid #DEE6FC;
          border-radius: 2px 0px 0px 0px;
          padding: 4px;
          text-align: center;
          font-size: 12px;
        }



      }
      .table1 {
        margin-bottom: 10px;
      }
      .table3 {
        th,
        td {
          border-radius: 2px 0px 0px 0px;
          padding: 4px;
          text-align: center;
          font-size: 12px;
        }
      }

    }