【css】【零碎】用div+css布局代替table

为什么要用div+css来代替table？

div和table各有优势, 也并不能说table就没用了. 只是相比于table而言, div+css的方式优点更加明显并且更加灵活

并且div+css代替table是大势所趋

div方式是一边读一边加载的，但是table就要等到整个table完成后才一次性载入，不过这个是小问题

主要也还是因为div方式灵活，并且对于SEO更加友好，这才是关键

实现很简陋没怎么改样式大概看下

image

大概代码如下, 具体代码请看我的: https://codepen.io/sansenlian/pen/PgeWoJ

html

<div class="table">
    <div style="display:table-caption;text-align:center;">table</div>
    <div style="display:table-row;">
        <div class="table-cell-1">44564654654达杀手的打算打打</div>
        ...
    </div>  
    ...
</div>

css

.table {
    width: 100%;
    display:table;
    border:1px red solid;
}
.table-cell-1 {
    width: 70px;
    display:table-cell;
    vertical-align:middle;

    word-break: break-all;
    white-space: normal;
    border-bottom:1px red solid;
    border-right:1px red solid;
}
...