利用table布局复杂表格结构代码与样式

效果图

html代码

<table class="gridtable">
    <tr><td colspan="4" class="tableTitle">企业基本信息</td></tr>
    <tr>
        <td class="tableName">公司名称</td>
        <td class="tableValue">深圳华众互联科技网络有限公司</td>
        <td class="tableName">成立日期</td>
        <td class="tableValue">2014-10-01</td>
    </tr>
    <tr>
        <td class="tableName">技术领域</td>
        <td class="tableValue">电子信息</td>
        <td class="tableName">软件</td>
        <td class="tableValue">基础软件</td>
    </tr>
    <tr><td colspan="4" class="tableTitle">知识产权情况</td></tr>
    <tr>
        <td class="tableName">Ⅰ类知识产权数量</td>
        <td class="tableValue">8</td>
        <td class="tableName">Ⅱ类知识产权数量</td>
        <td class="tableValue">2</td>
    </tr>
    <tr>
        <td class="tableName">是否参院国家或者行业标准制定</td>
        <td class="tableValue">是</td>
        <td class="tableName"></td>
        <td class="tableValue"></td>
    </tr>
    <tr><td colspan="4" class="tableTitle">人力资源情况</td></tr>
    <tr>
        <td class="tableName">职工人数</td>
        <td class="tableValue">26</td>
        <td class="tableName">科技人员数</td>
        <td class="tableValue">22</td>
    </tr>
    <tr>
        <td class="tableName">本科及本科以上学历人员数</td>
        <td class="tableValue">18</td>
        <td class="tableName"></td>
        <td class="tableValue"></td>
    </tr>
    <tr><td colspan="4" class="tableTitle">近三年经营情况</td></tr>
    <tr>
        <td class="tableName">年度</td>
        <td class="tableName" v-for="(items,item) in list[0].value" :key="item">{{items.year}}</td>
    </tr>
    <tr v-for="(items,item) in list" :key="item+1">
        <td class="tableName">{{items.name}}</td>
        <td class="tableValue" v-for="(items,item1) in list[item].value" :key="item1+2">{{items.value}}</td>
    </tr>
    <tr>
        <td rowspan="2" class="tableName">研发投入概况</td>
        <td class="tableName">近三年研发费用总额</td>
        <td class="tableName">其中在中国研发费用总额</td>
        <td class="tableName">其中基础研究投入费用总额</td>
    </tr>
    <tr>
        <td class="tableValue">1000</td>
        <td class="tableValue">2000</td>
        <td class="tableValue">3000</td>
    </tr>
    <tr>
        <td rowspan="2" class="tableName">成果转换</td>
        <td class="tableName">近三年开展研发活动数量（立项数）</td>
        <td class="tableName">近一年企业总收入</td>
        <td class="tableName">近一年高新技术产品（服务）收入</td>
    </tr>
    <tr>
        <td class="tableValue">10</td>
        <td class="tableValue">20</td>
        <td class="tableValue">30</td>
    </tr>
    <tr>
        <td class="tableName">是否签订产学研合作协议</td>
        <td class="tableValue">是</td>
        <td class="tableName"></td>
        <td class="tableValue"></td>
    </tr>
</table>

相关data

list:[
    {
        name:"净资产",
        value:[
            {year:2017,value:200},
            {year:2018,value:300},
            {year:2019,value:400},
        ]
    },
    {
        name:"销售收入",
        value:[
            {year:2017,value:200},
            {year:2018,value:300},
            {year:2019,value:410},
        ]
    },
    {
        name:"研发费用",
        value:[
            {year:2017,value:200},
            {year:2018,value:300},
            {year:2019,value:420},
        ]
    },
]

css代码

 /* 自定义table样式 */
table.gridtable {
  width: 100%;
  font-size: 11px;
  /* color:#FFF; */
  border-width: 1px;
  text-align: center;
  border-color: #eeeaea;
  border-collapse: collapse;
}
table.gridtable th {/**表头样式 */
  border-width: 1px;
  color: #fff;
  padding: 8px;
  border-style: solid;
  border-color: #eeeaea;
  background-color: #68a8ff;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #eeeaea;
  background-color: #ffffff;
}
table.gridtable td.tableName{/**表格class为tableName的样式 */
    color:#FFF;
    background-color: #A0BBE1;
    text-align: center;
}
table.gridtable td.tableValue{/**表格class为tableValue的样式 */
    background-color: #F8F8F8;
    text-align: right;
}
table.gridtable td.tableTitle{/**表格class为tableTitle的样式 */
    /* background-color: #F8F8F8; */
    text-align: left;
    font-weight: 400
}
table.gridtable td.tableValue:hover{/**鼠标指项某一格时的样式 */
    background-color: #EBEBEB;
}