html - 表类内容显示使用div结构？

Question

除了使用 jQuery 进行切换控制之外，是否可以使用 div 结构而不是表格并单独使用 html/CSS 来显示所附屏幕截图中所示的内容。

关于输出的几点:

1. 在用户点击之前，任何子行及其内容都是不可见的父行的箭头图标，再次单击相同的箭头将隐藏各自的子行。
2. 点击箭头图标将使用 jQuery 切换动画使子行可见。
3. 它必须是响应式的。

Answer 1

我想你想做的可能是这样的:

EMBER 表
http://addepar.github.io/#/ember-table/overview

并且您可以使用 css display:table 将 div 放置到类似布局的表格中。

HTML

<div class="mytable">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>   
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
<div>

CSS

div.mytable {
    display: table;
    width: 100%;
}

div.mytable > div {
    display: table-row;
    width: 100%;
}
div.mytable > div > div {
    display: table-cell;
    width: 20%;
    padding:1em;
}

演示

JSFiddle 在这里:http://jsfiddle.net/naokiota/jCqm7/3/

您可以阅读此页面: Layout divs in css like table cells in HTML Tables

希望这对您有所帮助。