使用CSS显示重现表格布局:表格属性

Question

我有一个很好的布局,它使用HTML表创建一个带有简单标题的可滚动侧边栏.它运作良好,您可以在这里查看:jsFiddle演示

以下是我的解决方案的大纲:

<aside>
    <table>
        <tr>
            <td>
                <header>
                    header
                </header>
            </td>
        </tr>
        <tr>
            <td class="secondcell">
                <div class="remaining">
                    ...
                </div>
            </td>
        </tr>
    </table>
</aside>
<article>
  ...
</article>

使用以下CSS样式:

aside { 
    position: absolute; 
    left:0; top: 0; bottom: 0; 
    width: 200px; 
}

aside header { 
    height: 100px; 
}

aside table {
    width:100%;
    height:100%;
}

.secondcell {
    height:100%; 
    width:100%;
}

.remaining { 
    height: 100%; 
    background-color: red; 
    overflow-y: auto; 
}

article { 
    position: absolute; 
    left: 200px; 
    padding:10px; 
}

但不幸的是,我使用的HTML表很多人都不喜欢,因为它不是语义等等.

所以我想用CSS格式重现这个布局,但它不起作用.你可以在这里查看我的尝试:jsFiddle demo2

也许这根本不可能,所以我不能只用div来做CSS？

Answer 1

你可以通过css非常简单地实现这一点

如果您有以下三个类:

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

您只需替换所有table带标签的<div class="table"></div>
所有tr标签与<div class="row"></div>
所有td带标签<div class="cell"></div>

你的更新小提琴