css 美化原生的table样式

先看效果图

对应的美化代码

css

<style>
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }
    table.gridtable th {
        border-width: 1px;
       padding: 13px 0px;
        border-style: solid;
        border-color: #666666;
        background-color: #DCDFE6;
    }
    table.gridtable td.left {
        width: 173px;
        border-width: 1px;
        padding: 13px 0px;
        border-style: solid;
        border-color: #DCDFE6;
        background: #f3f6f9;
        padding-right: 15px;
        text-align: right;
        line-height: 22px;
    }
    table.gridtable td.right {
        width: 775px;
        border-width: 1px;
        border-style: solid;
        border-color: #DCDFE6;
        padding-left: 17px;
        background: #FFFFFF;
        line-height: 22px;
    }
</style>

　html

<table class="gridtable">
                    <tr>
                        <td class="left">工程代码</td><td class="right">2108-440604-04-01-27</td>
                    </tr>
                    <tr>
                        <td class="left">业务表单</td><td class="right">项目审批事项征求意见信息表</td>
                    </tr>
                    <tr>
                        <td class="left">检查时间</td><td class="right">2021-07-06 14:40</td>
                    </tr>
                    <tr>
                        <td class="left">报错信息</td><td class="right">### Error updating database. Cause: com mysql jdbc.exceptions, jdbc. M Sqlintegrityconstraintviolationexception: Duplicate entry 202106230088 for key UN AEA HI APPLYINST CODE ##H The error may involve com.a ugurit. aplanmis common mapper. Aeahiapplyinstmapper insertaeahiappl yinst-inline #a The error occurred while setting parameters ## SQL: ins ert into AEA HI APPLYINST (APPLYINST ID, APPLYINST CODE, APPLYINST SOURCE, QUEUE NO, IS SERIES APPROVE, APPLYINST MEMO, APPLYINST STATE, ACCEPT TIME,END TIME, IS DELETED, CREATER, CREATE TIME,MODIFIER, MODIFY TIME, LINKMAN INFO ID, BRANCH ORG, APPLY SUBJECT, IS SERVICE COOPERATIVE IS SMS SEND SMS SEND TIME.ROOT O</td>
                    </tr>
</table>