Question

http://jsbin.com/uzojax/2/edit

Above is my jsbin i have to display cell 8 in block without rowspan attribute and without disturbing html table structure of that cell
how it woud be possible.

Answer 1

You can display the cell as a block or inline block as you can see here:

http://jsfiddle.net/dCgzh/1/

You can use position: relative, but it will position the cell relatively to the position it had inside the table, which makes settings its position and width a little harder, because the cell doesn’t ‘know’ the properties of the surrounding cells.

If you use position: absolute (like in the fiddle), then the positioning is relative to the body, or a container element that has a positioning itself. With that method, you can position the cell on the left of the table. In the fiddle, the table has ‘position: relative’. Allowing you to position the cell on the left of the table and giving it the same width (100%) of the table.

  .csstdred {
    display: block;
    /*display: inline-block;*/
    position: relative;
    width: 200px;
  }

There is no CSS equivalent of rowspan, which makes sense. Tables are for tabular data. Thus, the table is an integral part of the page structure. Therefore, attributes like rowspan cannot be seen as just styling, so they are available as separate HTML attributes instead of CSS styling.