is it possible to make CSS3 tables that have different number column and column width in each row?

Problem

is it possible to use CSS3 table to make it look like this

 +---A---+---B---+---C---+---D---+---E---+
 >>>>+---A---+---B---+---C---+---D---+<<<<  ---> case 1
 +---A---+---B---+---C---+---D---+---E---+

case 1: need to margin-left the first cell right? is it any code that make auto to margin

 +---A---+---B---+---C---+---D---+---E---+
 +-----A-----+-------B-------+---C---+-D-+  ---> case 2

case 2: colspan is work on the cell width is same. what if the cell width is vary. Is it possible?

all of this code must be in CSS3 and HTML5 only. No use <table>, <tr>, <td> only <div>

Should I convert to use grid instead of using table?

Thank you.

Problem courtesy of: xyzxyz442

Solution

Use tables if it is tabular data, if it isn't then use something else.

From your example where column widths don't match, and where colspans don't do what you want it's hard to see how the data could be tabular data.

A couple of options, colspan can work if you do it the right way. For example setting a colspan of 2 on normal single span cells would allow you to make other cells span to halfway through another column.

Or if it really isn't tabular data then use DIV's and position them apropriatley.

Using tables, you would not be able to vary the width of one rows cells without affecting the width of all the other rows cells though, im not even sure you can dynamically change colspan once the table has been drawn, never tried it to be honest).

In all honesty I suspect you are really looking to solve this using DIV's, as your data really doesn't seem to fit the tabular data model. Tbular data will generally have headers on columns with data corresponding to those column headers in the appropriate column. Your cells seem to be able to move freely and therefore would not be fixed under any particular column header.

I am guessing from the layout that you are possibly creating some sort of calendar? and events can span any distance of time etc across the columns? In which case I personally would prefer divs, although I know some people would prefer using tables.

Solution courtesy of: Jon Taylor

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.