html – 仅使用CSS创建表

概述我需要一个如下所示的表格布局： 第一单元(行距2) 第二和第三单元格(单元格1和单元格旁边) 第四组(第二组和第三组下方的第二组) 我遇到的问题是它只需要使用CSS完成,我根本不能使用代码中的任何表元素. 如果Cell 2,3和4为空,则单元1还需要仍然伸展到100％宽度. 我正在Joomla的一个Artisteer 4模板上工作,并且已经搜遍了所有人,并且无法找到可行的解决方案. 我的代码如下： 我需要一个如下所示的表格布局：

第一单元(行距2)

第二和第三单元格(单元格1和单元格旁边)

第四组(第二组和第三组下方的第二组)

我遇到的问题是它只需要使用CSS完成,我根本不能使用代码中的任何表元素.

如果Cell 2,3和4为空,则单元1还需要仍然伸展到100％宽度.

我正在Joomla的一个Artisteer 4模板上工作,并且已经搜遍了所有人,并且无法找到可行的解决方案.

我的代码如下：

<div >   <div >      <div >         <div ><?PHP echo $vIEw->position('banner2','prof-nostyle'); if ($vIEw->containsModules('breadcrumb')) echo artxPost($vIEw->position('breadcrumb')); echo $vIEw->positions(array('user1' => 50,'user2' => 50),'prof-article'); echo $vIEw->position('banner3','prof-nostyle'); echo artxPost(array('content' => '<jdoc:include type="message" />','classes' => ' prof-m  essages')); echo '<jdoc:include type="component" />'; echo $vIEw->position('banner4','prof-nostyle'); echo $vIEw->positions(array('user4' => 50,'user5' => 50),'prof-article'); echo $vIEw->position('banner5','prof-nostyle');?> </div> <?PHP if ($vIEw->containsModules('left')) : ?>   <div >     <?PHP echo $vIEw->position('left','prof-block'); ?>   </div>  <?PHP endif; ?> <?PHP if ($vIEw->containsModules('right')) : ?>    <div >       <?PHP echo $vIEw->position('right','prof-block'); ?>    </div>        <?PHP endif; ?>       </div>     </div>   </div>

CSS是：

.prof-layout-wrapper{  position: relative;  margin: 0 auto 0 auto;  z-index: auto !important; }.prof-content-layout{  display: table;  wIDth: 100%;  table-layout: fixed;      float: left;}.prof-content-layout-row{   display: table-row; }.prof-layout-cell{  display: table-cell;  vertical-align: top;}

对于我的生活,我不能让Cell 4跨越而不破坏整个布局.

请帮忙！

(我希望这是一个很好的解释)

解决方法 当然！

Demo Fiddle

HTML

<div class='table'>    <div class='row'>        <div class='cell'>cell1</div>        <div class='cell'>            <div class='table'>                <div class='row'>                    <div class='cell'>cell2</div>                    <div class='cell'>cell3</div>                </div>                <div class='caption'>cell4</div>            </div>        </div>    </div></div>

CSS

HTML,body {    wIDth:100%;}.table {    display:table;    wIDth:100%;}.row {    display:table-row;}.cell {    display:table-cell;    border:1px solID grey;}.caption {    display:table-caption;    caption-sIDe:bottom;    border:1px solID grey;}

如果您想要自动展开/折叠功能,可以稍微调整一下代码,a la this fiddle

总结

以上是内存溢出为你收集整理的html – 仅使用CSS创建表全部内容，希望文章能够帮你解决html – 仅使用CSS创建表所遇到的程序开发问题。

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