利用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-01td>
    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">8td>
        <td class="tableName">Ⅱ类知识产权数量td>
        <td class="tableValue">2td>
    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">26td>
        <td class="tableName">科技人员数td>
        <td class="tableValue">22td>
    tr>
    <tr>
        <td class="tableName">本科及本科以上学历人员数td>
        <td class="tableValue">18td>
        <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">1000td>
        <td class="tableValue">2000td>
        <td class="tableValue">3000td>
    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">10td>
        <td class="tableValue">20td>
        <td class="tableValue">30td>
    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;
}