小盒子的星空

HTML

<div class="table">
        <div class="table-row">
            <div class="table-cell">
                AAA
            </div>
            <div class="table-cell">
                BBB
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                CCC
            </div>
            <div class="table-cell">
                DDD
            </div>
        </div>
    </div>

CSS

        .table {
            display: table;
            border-collapse:separate;
            border-spacing: 5px;
            border: 2px solid #fff;
        }

        .table-row {
            display: table-row;
        }

        .table-cell {
            display: table-cell;
            border: 3px solid #0000ff;
            vertical-align: middle;
            width: 100px;
            height: 100px;
        }

利用display對應table屬性，達到DIV畫表格的功能，對應屬性如下：

1. inline-table：顯示成沒有換行的表格
2. table：對應<table>標籤。
3. table-row：對應<tr>標籤。
4. table-row-group：對應<tbody>標籤。
5. table-cell：對應<td>標籤。
6. table-caption：對應<caption>標籤。
7. table-column：對應<col>標籤
8. table-column-group：對應<colgroup>標籤。
9. table-header-group：對應<theader>標籤。
10. table-footer-group：對應<tfooter>標籤。

※ IE7以下不相容

※ 在 display:table這層加上下列的CSS語法，讓每隔之間有間隔

 border-collapse:separate;
 border-spacing: 5px;