表格

示例

HTML

<div class="baie-table">
    <div class="baie-table-hd">
        <div class="baie-table-tr">
            <div class="baie-table-td">月度</div>
            <div class="baie-table-td">奖金(元)</div>
            <div class="baie-table-td"></div>
        </div>
    </div>
    <div class="baie-table-bd">
        <a href="JavaScript:;" class="baie-table-tr">
            <div class="baie-table-td">2016年03月</div>
            <div class="baie-table-td">3.5</div>
            <div class="baie-table-td"><i class="iconfont icon-arrow-right"></i></div>
        </a>
    </div>
</div>

CSS

/* 表格 */
.baie-table {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}
.baie-table-tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.baie-table-td {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
}
.baie-table-hd .baie-table-tr {
    position: relative;
}
.baie-table-hd .baie-table-tr:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
.baie-table-hd .baie-table-td {
    font-size: .30rem;
    color: #838383;
    line-height: 1rem;
}
.baie-table-bd .baie-table-tr {
    position: relative;
}
.baie-table-bd .baie-table-tr:not(:first-child):before {
    position: absolute;
    left: .30rem;
    top: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
.baie-table-bd .baie-table-td {
    font-size: .28rem;
    line-height: .9rem;
}

CSS2(改写表格比例)

/* 改写表格列比例 */
.baie-table-td:nth-child(1) {
    -webkit-box-flex: 4.4;
    -webkit-flex: 4.4;
    flex: 4.4;
}
.baie-table-td:nth-child(2) {
    -webkit-box-flex: 10;
    -webkit-flex: 10;
    flex: 10;
}
.baie-table-td:nth-child(3) {
    -webkit-box-flex: 1.5;
    -webkit-flex: 1.5;
    flex: 1.5;
}