table-cell - some kind of colspan?

Question

I am a bit puzzled right now, because I had CSS code that worked, but it wasn\'t beautiful at all. I now want to rework this CSS styles and build them via LESS. And I have b

Answer 1

I could achieve the col-span with the table-row-group

div {
    border: solid 1px;
    min-width: 10px;
    min-height: 10px;
}

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

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

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

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

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

<div style="display: table;">
  <div class="table-head">
    <div class="table-cell">h1</div>
    <div class="table-cell">h2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell">c2</div>
  </div>

  <div class="table-row-group">
    <div class="table-cell-group">
      cc
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell">c2</div>
  </div>

  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell"></div>
  </div>


</div>

Answer 2

The table-caption is a good idea if you need header and footer row regardless of columns width... The absolute positioning works great except when your text is line-feeding at least once more than other cells in that row...

So here's a pseudo solution to have header in between rows of a responsive table and be sure to have line-feed according to the table header content (which is important if the table is populated dynamically). I've also included a sort of colspan as well (although not line-feeding accurately) :

CSS :

.table
{   display:table;
    position:relative;
}
.table > .header
{   display:table-caption;
    position:absolute;
    left:0;
    right:0;
}
.table > .l50{right:50%;}
.table > .r50{left:50%;}

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

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

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child
{   width:1%;
    max-width:1px;
    overflow:hidden;
    visibility:hidden;
}

.table > .header + .row > :last-child > div
{   float:left;
    display:inline;
    visibility:hidden;
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50{width:5000%;}

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;}
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
.table > .row > .top
{   position:relative;
    z-index:1;
}

http://jsfiddle.net/sp2U4/

Answer 3

CSS3 has a column-span attribute. But please try to use flexbox or css grid for layout.

Answer 4

One idea would be to leverage absolute positioning. Relative position a wrapper around the table, then all absolute positioning becomes coordinate centric to the wrapper. See below. Notice I define a class of tableWrapper which will be set position:relative, then define class of tableRow and - I'm assuming you'll set .tableRow div { display: table-cell; } so I didn't bother putting a class on each div. You'll have to find a way to prevent it from overlapping the div below it if it's height gets larger than the 2nd div. Should be very doable.

<div class="tableWrapper">
  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>

  <div class="tableRow">
      <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div>
      <div>&nbsp; (only here to force a row break before the next table row)</div>
  </div>

  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>
</div>

Answer 5

Use a real table when you are forced to do so to get the layout you want.

The ONLY necessary reason to not use a table for layout is that a speaking browser for the blind gives the row number and column number coordinates of each table cell. This confuses the blind reader when table cells are used for layout.

Of course, it is much easier to use margins, borders, and padding where they do the job much better than faking them with tables, but when you have something with a layout similar to a newspaper want-ad page, it is better to use a real table, a set of nested tables, or a table full of divs.

I will always use div or div faking a table with display table parts when they work.

When they do not work, or when the div layout falls apart at different screen resolutions, I will use a real table. It never falls apart.

This kludgery by the W3C would have had a better solution with a CSS code to tell the speaking browser to not treat a real table as a table.

I also treat a table of comments arranged around the page title as tabular data, even though it is not numeric. Tabular data can include categorical data.

One idea is to hide (with same foreground and background colors) a disclaimer telling the blind person to ignore the table coordinates the speaking browser provides because the use of a table was forced by the lack of ability to make the layout work with divs.

Answer 6

Depending on your needs, flexbox layout may accomplish what you are looking for.

div.table{
  display:block;
  width:100%;
}

div.table >div{
  display:flex;
  width:100%;
  border:1px solid gray;
  flex-direction:horizonal;
}
div.table > div >div{
  display: block;
  flex-grow:1;
  border-bottom:1px solid #ffffd;
  vertical-align: middle;
  height:30px;
  padding:4px;
}

See demo:

http://jsbin.com/mimegodiba/edit?html,css,output