html – 使用CSS显示重现表格布局：表格属性

概述我有一个很好的布局,它使用 HTML表创建一个带有简单标题的可滚动侧边栏.效果很好,你可以在这里查看： jsFiddle demo 以下是我的解决方案的大纲： <aside> <table> <tr> <td> <header> header </ 我有一个很好的布局,它使用 HTML表创建一个带有简单标题的可滚动侧边栏.效果很好,你可以在这里查看： jsFiddle demo

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

<asIDe>    <table>        <tr>            <td>                <header>                    header                </header>            </td>        </tr>        <tr>            <td >                <div >                    ...                </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？

解决方法 你可以通过CSS非常简单地实现这一点

如果您有以下三个类：

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

你只需用< div class =“table”>< / div>替换所有表格标签
带有< div class =“row”>< / div>的所有tr标签
所有td标签都包含< div class =“cell”>< / div>

Your updated fiddle

总结

以上是内存溢出为你收集整理的html – 使用CSS显示重现表格布局：表格属性全部内容，希望文章能够帮你解决html – 使用CSS显示重现表格布局：表格属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。