On 3 Dec 2012 as I do recall,
Michael Drake wrote:
> In article <[email protected]>,
> Harriet Bazley <[email protected]> wrote:
[snip]
> Doing it with one table, you could have a six column table, with three
> cells on the first row all spanning two columns, and two cells on the
> second row both spanning three columns. That way you can give each cell
> the width you want without putting conflicting demands on any columns.
Mmmm... that is a bit of a nasty hack :-(
>
[snip]
> <div class="example row">
> <div class="example head-left">head left</div>
> <div class="example head-centre">head centre</div>
> <div class="example head-right">head right</div>
> </div>
> <div class="example row">
> <div class="example body-left">body left</div>
> <div class="example body-right">body right</div>
> </div>
>
>
> With table layout:
>
> .example {
> border: 1px inset #aaa; }
>
> .row {
> display: table;
> border-spacing: 0;
> border: none;
> width: 100%; }
> .head-left {
> display: table-cell;
> width: 20%; }
> .head-centre {
> display: table-cell;
> text-align: center; }
> .head-right {
> display: table-cell;
> width: 20%;
> text-align: right; }
> .body-left {
> display: table-cell;
> width: 50%; }
> .body-right {
> display: table-cell;
> text-align: right; }
As I read it, this is, in fact, defining two separate tables; one with
two cells in a single row and one with three?
--
Harriet Bazley == Loyaulte me lie ==
If it's not broken, don't fix it.
