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>