CSS - rowspan像效果 [英] CSS - rowspan like effect

问题描述

我只是想实现左列有两个合并行和右边一个没有。如何实现此布局？

I simply want to achieve the effect where the left column has two merged rows and the one on right has none. How can I achieve this layout?

html表将如下所示：

The html table will look like -

<table border="1" >
  <tr>
    <td rowspan="2">Div 1</td>
    <td> Div 2 </td>
  </tr>
  <tr>
    <td>Div3</td>
  </tr>
</table>​​​​​​

编辑：这使用Div。我将把用户控件放在每个div元素。 Div3必须在div2以下，但不能低于Div1。

I want to acheive this using Div. I would be putting User control in each div element. It is important that Div3 starts below div2 but not below Div1.

[对不起，这是第一篇文章，所以无法添加图片]

[Sorry, this is first post so cannot add image]

感谢。

推荐答案

CSS

    body {
      margin: 0;
      padding: 50px;
      background-color: #FFFFFF;
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
    }
    .tablewrapper {
      position: relative;
    }
    .table {
      display: table;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
      border: 1px solid red;
      padding: 1em;
    }
    .cell.empty
    {
      border: none;
      width: 100px;
    }
    .cell.rowspanned {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
    }

<div class="tablewrapper">
      <div class="table">
        <div class="row">
          <div class="cell">
            Top left
          </div>
          <div class="rowspanned cell">
            Center
          </div>
          <div class="cell">
            Top right
          </div>
        </div>
        <div class="row">
          <div class="cell">
            Bottom left
          </div>
          <div class="empty cell"></div>
          <div class="cell">
            Bottom right
          </div>
        </div>
      </div>
    </div>

演示： http://www.sitepoint.com/rowspans-colspans-in-css-tables/

这篇关于CSS - rowspan像效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！