html table表格 豎向樣式

HTML

<table class="mailTable"  cellspacing="0" cellpadding="0">
        <tr>
            <td class="column">訂單編號</td>
            <td>12121212121212121</td>
        </tr>
        <tr>
            <td class="column">貨物城市</td>
            <td>上海</td>
        </tr>
        <tr>
            <td class="column">貨物運達城市</td>
            <td>鄭州</td>
        </tr>
        <tr>
            <td class="column">貨物描述</td>
            <td>衣服</td>
        </tr>
    </table>

 

CSS樣式

.mailTable{
    width: 100%;
    border-top: 1px solid #E6EAEE;
    border-left: 1px solid #E6EAEE;
}
.mailTable tr td{
    width: 200px;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #E6EAEE;
    border-right: 1px solid #E6EAEE;
}
.mailTable tr td.column {
    background-color: #EFF3F6;
    color: #393C3E;
    width: 30%;
}

 

效果

參考： https://www.cnblogs.com/martinl/p/6696273.html