带CSS的内联表

Question

我在尝试使用div而不是表和CSS创建内联表时遇到了一个主要问题。我的问题是我有3种类型的行并没有真正同步，所以预计不会排队。我想知道是否有解决方案或更好的方法。

正如你在小提琴中看到的那样，我试图让标题，行和子行排成一行。所有列和标题具有相同的宽度％，但它们的总宽度将不同。此外，子行应缩进显示在父项下。

小提琴

http://jsfiddle.net/b6ptag0b/15/

HTML

<div id = "wrapper">
<div id = "headers">
    <div class = "col header_name">Name</div>
    <div class = "col header_id">ID</div>
    <div class = "col header_country">Country</div>
</div>

<div id = "table">
    <div class = "row" data-id = "1">
        <div class = "col button">+</div>
        <div class = "col name">Bob Dolle</div>
        <div class = "col id">1234</div>
        <div class = "col country">America</div>
    </div>
    <div class = "row_child" data-parent = "1">
        <div class = "col name">Joe Dolle</div>
        <div class = "col id">67788</div>
        <div class = "col country">America</div>                
    </div>
</div>

CSS

#headers{
    background-color:#ccc;
}
.row{
    background-color:#ddd;
}
.row_child{
    background-color:#AAA8A8;
    margin-left:40px;
}
.col{
    display:inline-block;
}
#table{
    padding:5px;
}
.header_name, .name{
    width:30%
}
.header_id, .id{
    width:10%;
}
.header_country, .country{
    width:25%;
}
.button{
    padding:0 10px;
}

Answer 1

好吧，尽管有“使用表”参数（我可以看到你想要使用DIVS的原因），你想用CSS做的事情非常容易，但是你使用的是一个非常复杂的逻辑。您可以使用列方法而不是行，或使用行方法，只需为每个列提供相同的宽度，并在与名称相同的div中包含.button类，然后只需向您的{{添加一些表逻辑1}}

divs

See fiddle here

Answer 2

现代浏览器允许您使用新的CSS表格布局，例如：

小提琴

http://jsfiddle.net/b6ptag0b/30/

HTML

<div id = "wrapper">
    <div id = "headers">
        <div class = "col header_name">Name</div>
        <div class = "col header_id">ID</div>
        <div class = "col header_country">Country</div>
    </div>

    <div class = "row" data-id = "1">
        <div class = "col name">Bob Dolle</div>
        <div class = "col id">1234</div>
        <div class = "col country">America</div>
    </div>

    <div class = "row_child" data-parent = "1">
        <div class = "col name">Joe Dolle</div>
        <div class = "col id">67788</div>
        <div class = "col country">America</div>                
    </div>
</div>

CSS

#wrapper{
    display: table;
}

#headers{
    background-color:#ccc;
    display: table-row;
}

.row{
    background-color:#ddd;
    display: table-row;
}

.row_child{
    background-color:#AAA8A8;
    display: table-row;
}

.col{
    display: table-cell;
    padding: 2px;
}