html - 仅使用 CSS 创建表格

标签 html css joomla css-tables

我需要一个如下所示的表格布局:

单元格一(rowspan 2)

单元格二和三(单元格一和彼此相邻)

单元格四(单元格二和三下方的 colspan 2)

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

如果单元格 2、3 和 4 为空,单元格 1 还需要拉伸(stretch)至 100% 宽度。

我正在 Joomla 中制作一个 Artisteer 4 模板,搜索了所有地方,但无法找到可行的解决方案。

我的代码如下:

<div class="prof-layout-wrapper">
   <div class="prof-content-layout">
      <div class="prof-content-layout-row">
         <div class="prof-layout-cell prof-content">
<?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 class="prof-layout-cell prof-sidebar1">
     <?php echo $view->position('left', 'prof-block'); ?>
   </div>
  <?php endif; ?>
 <?php if ($view->containsModules('right')) : ?>
    <div class="prof-layout-cell prof-sidebar2">
       <?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 创建表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22173949/

相关文章:

html - 如何使用带有模块化比例的 SASS 为所有 header 生成尺寸

css - 使用 CSS 的流体宽度布局

javascript - 如何直接在圆圈内写东西?

css - 如何使现有的 Joomla 2.5 模板响应?

ssl - Xampp bitnami joomla ssl

javascript - jQuery:当点击的元素都共享相同的 CSS 类时,我如何定位它们?

javascript - 当它得到位置固定时缩小 tr 宽度

html - 徽章不是完美的三 Angular 形

html - 在没有 javascript 的情况下滑动、隐藏和导航 div

joomla - 清理 joomla 中的输入