Re: [css-d] Table-like design with numbered rows
Magnus Fahlström wrote: I don't know how to achieve this without using a table: http://www.magstorm.se/table.htm A table-like design with four columns, with every row numbered, wrapped in a float:left div. For content that fits the tabular data definition, use HTML tables. Your example seems to fit that description since you have a specific order requirement. For table look-alike designs, CSS tables may come handy. Example of CSS table... http://www.gunlaug.no/tos/moa_11g.html regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table-like design with numbered rows
G. Sørtun wrote:
Magnus Fahlström wrote:
I don't know how to achieve this without using a table:
http://www.magstorm.se/table.htm A table-like design with four
columns, with every row numbered, wrapped in a float:left div.
For content that fits the tabular data definition, use HTML tables.
I'm not sure whether the content is tabular data, as the example is very
schematic.
HTML tables do not have any automatic numbering feature, so if you want the
numbers to be generated automatically, you would need to use preprocessing,
server-side generation of content, client-side generation of content, or
CSS. An essential question is: would you like to have the numbers there even
if style sheets and/or client-side scripting is disabled?
But if you consider the CSS approach here, then you could use counters and
generated content (which means that the usual CSS caveats apply unusually
strongly). In a simple case (just one table on a page, data rows start with
td with empty content, heading rows don't start with td) you could use the
following:
table { counter-reset: rowcount; }
td:first-child:after {
counter-increment: rowcount;
content: counter(rowcount);
font-weight: bold; }
For table look-alike designs, CSS tables may come handy.
Well, yes, and even for tables if you can't or just won't use HTML tables
(e.g. when you directly format XML data with CSS). But CSS tables (e.g.
display: table-cell) are relatively new in terms of browser support.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table-like design with numbered rows
I don't know how to achieve this without using a table: http://www.magstorm.se/table.htm A table-like design with four columns, with every row numbered, wrapped in a float:left div. Since these columns can get very long and I would like the items in a specific order, I must be able to paste the code for a new item, making the others jump one position to leave room for the new item, without affecting the numbering which should always be to the left. If it hadn't been for the numbering, this would have been very easy (float:left). The height of the divs containing the numbers must be equal to the height of the divs containing the items and since the images can be of different size and the text of different length, I simply don't know the height in advance. Does anyone know how to solve this? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
