像表格一样使用div

Question

如何在不使用表但只使用div的情况下进行布局？

Answer 1

使用css dispay属性：

`table`               Let the element behave like a <table> element 
`table-caption`       Let the element behave like a <caption> element
`table-column-group`  Let the element behave like a <colgroup> element  
`table-header-group`  Let the element behave like a <thead> element 
`table-footer-group`  Let the element behave like a <tfoot> element 
`table-row-group`     Let the element behave like a <tbody> element 
`table-cell`          Let the element behave like a <td> element    
`table-column`        Let the element behave like a <col> element   
`table-row`           Let the element behave like a <tr> element

来源：http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

您可以使用div和相应的css生成表格布局。 例如

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

在CSS中，它会像

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

Answer 3

您可以使用bootstrap使其成为可能。您还可以使用it.apply引导类获取一个非常棒的页面到div elements.search关于bootstrap.it s简单，现在所有webdevelopers都在公司中使用它。你可以用任何你需要的简单代码获得真正令人敬畏的页面。只需将bootstrap文件添加到你的项目中并使用它提供的css类。你可以用div创建表格。

Answer 4

您正在寻找的是 Tableless layout 或 css grid

如果你谷歌它你会发现很多实现，但这里有一个：

HTML

<div id="table">
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
</div>

CSS

#table {
    width: 470px;
    border-top: 4px solid #e3e7e7;
    }

#table p {
    clear: both;
    width: 100%;
    margin: 0;
    }

#table span {
    float: left;
    padding: 0 10px;
    border-left: 1px solid #e3e7e7;
    border-bottom: 1px solid #e3e7e7;
    }

#table span.col1 {
    width: 110px;
    }

#table span.col2 {
    width: 186px;
    }

#table span.col3 {
    width: 110px;
    border-right: 1px solid #e3e7e7;
    }

结果