如何使用CSS和div模仿表格布局（垂直对齐的单元格）

Question

可以使用CSS和div来完成，还是必须使用弹性框或使用html表？

我希望找到一个利用display的表：table，display：table-row，display：CSS的table-cell属性。

更新：每列有5个元素。我的问题的关键在于是否可以使用CSS的表格布局算法自动对齐所有3列中的5个元素，以便它们处于相同的水平对齐，而不管任何给定的内容量单元格 - 每列自动调整，以保持表格行的完整性。如果这些元素中的每一个都作为表格单元格存在于表格行中，这就像表格的行为。

Answer 1

如果其他人需要这个，这是我的答案的扩展，完全模仿示例屏幕截图的外观。

HMTL：

<div class="table-container">
    <div class="table-cell">
        Row 1 cell 1
    </div>
    <div class="table-cell">
        Row 1 cell 2
    </div>
    <div class="table-cell">
        Row 1 cell 3 <p>with a paragraph to make things interesting</p>
    </div>
</div>

<div class="table-container">
    <div class="table-cell">
        Row 2 cell 1
    </div>
    <div class="table-cell">
        Row 2 cell 2
    </div>
    <div class="table-cell">
        Row 2 cell 3<br/>
        w/extra stuff in here
    </div>
</div>

<div class="table-container">
    <div class="table-cell">
        Row 3 cell 1
    </div>
    <div class="table-cell">
        Row 3 cell 2
    </div>
    <div class="table-cell">
        Row 3 cell 3 <p>with a paragraph to make things interesting</p>
    </div>
</div>

CSS：

.table-container {
    border-spacing: 5px;
    display: table;
    margin-top:-10px;
    }
.table-cell {
    border: solid #ddd 2px;
    display: table-cell;
    padding:10px;
    border-width:0 2px;
    width:200px
}
.table-container:first-child .table-cell{border-top:2px solid #ddd;}
.table-container:last-child .table-cell{border-bottom:2px solid #ddd;top:-10px!important;}

Answer 2

我认为您已经回答了自己的问题。使用display:table*属性可以使div的行为类似于table：

<div class="container">
    <div class="item">
        Enrollment
    </div>
    <div class="item">
        Enrollment
    </div>
    <div class="item">
        Enrollment<br/>
        w/extra stuff in here
    </div>
</div>

.container {
    border-spacing: 5px;
    display: table;
}
.item {
    border: solid #ddd 2px;
    display: table-cell;
}

http://jsfiddle.net/ukLyrqo7/

您可能需要在＆＃34;细胞的底部留出一些空间＆＃34;绝对定位估计文本和按钮。