Setting the width of columns in a table
in [CSS]
|
Prev: paypal wholesale all brand(UGGBOOTS,SHOES,CLOTHES,HANDBAG,WATCH,JEANS,JERSEY,T-SHIRT,SHIRTS,HOODY,EYEGLASS,CAP,SHAWL,WALLT) and so on.
Next: Style first list item differently
From: Ben C on 3 Feb 2010 16:06 On 2010-02-03, Jukka K. Korpela <jkorpela(a)cs.tut.fi> wrote: > David Stone wrote: [...] >> At least, the answer >> grid _looks_ better if the answer choice columns are equal width. > > Well, why don't you make th grid a single table then? In a single table, > columns are of the same width out of necessity. No they aren't. Presumably you meant something else, but I can't figure out what.
From: Jukka K. Korpela on 3 Feb 2010 16:48 Ben C wrote: > On 2010-02-03, Jukka K. Korpela <jkorpela(a)cs.tut.fi> wrote: >> David Stone wrote: > [...] >>> At least, the answer >>> grid _looks_ better if the answer choice columns are equal width. >> >> Well, why don't you make th grid a single table then? In a single >> table, columns are of the same width out of necessity. > > No they aren't. Presumably you meant something else, but I can't > figure out what. Right. I should probably do something else than post to Usenet until I get back to my senses. I thought David referred to having corresponding coluns in different tables of equal width, but obviously it was about setting two or more columns in a single table to have the same width. For this purpose, assuming the columns are really comparable to each other, setting width (using em or % unit) usually makes sense. -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: Ben C on 3 Feb 2010 16:55 On 2010-02-03, Jukka K. Korpela <jkorpela(a)cs.tut.fi> wrote: > Ben C wrote: > >> On 2010-02-03, Jukka K. Korpela <jkorpela(a)cs.tut.fi> wrote: >>> David Stone wrote: >> [...] >>>> At least, the answer >>>> grid _looks_ better if the answer choice columns are equal width. >>> >>> Well, why don't you make th grid a single table then? In a single >>> table, columns are of the same width out of necessity. >> >> No they aren't. Presumably you meant something else, but I can't >> figure out what. > > Right. I should probably do something else than post to Usenet until I get > back to my senses. Ah, I think you meant all the cells in one column of a table are the same widths as each other. > I thought David referred to having corresponding coluns in different tables > of equal width, but obviously it was about setting two or more columns in a > single table to have the same width. I don't know what he meant actually. You might have been right the first time. > For this purpose, assuming the columns are really comparable to each > other, setting width (using em or % unit) usually makes sense. Yes, although you can't stop a column getting wider if its "preferred minimum width" (the width of the longest word basically) exceeds what you set. At least, not with table-layout: auto you can't.
From: GTalbot on 3 Feb 2010 17:29 In article <7st4t1Fs7...(a)mid.individual.net>, Barely Audible <anywh...(a)but.here> wrote: >>> HOw do I set the width of columns in CSS ie First TD of first TR to be >>> set to a specific width & Second TD of first TR to use use the remainder >>> of the table width? On 3 fév, 12:40, "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote: > David Stone wrote: > > col.firstCol { width: 5em } David, a table has only one first column; therefore, using a class here is not semantically best. An id should be preferred. Id is ideal for uniquely defined elements; class is for grouping logically elements together. > > col.secondCol { width: 10em } > - - > > The potential problem with child selectors is browser compatibility, > > especially backwards compatibility (and especially for IE!) > > The real problem is that width settings for col elements are ignored > according to specifications, even though some versions of IE may "honor" > them under some circumstances. > If table-layout: fixed has been declared, then all CSS 2.1 compliant browser should honor the width of <col>. " In the fixed table layout algorithm, the width of each column is determined as follows: 1. A column element with a value other than 'auto' for the 'width' property sets the width for that column. 2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns. 3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing). " CSS 2.1, Table chapter, section 17.5.2.1 Fixed table layout http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout There are tests in the latest CSS 2.1 test suite which are supposed to test this very carefully and thoroughly. IE8 is supposed to honor the width set on <col>, preferably when table-layout: fixed has been set: Value other than 'auto' for column width sets width of cells in the column * A column element with a value other than 'auto' for the 'width' property sets the width for the column of cells it contains. http://www.w3.org/Style/CSS/Test/CSS2.1/20100127/html4/fixed-table-layout-002.htm Cell in the first row with specified width sets the width for the column * A cell in the first row with specified non-auto 'width' sets the width for its column in the absence of a column element with specified non-auto width. http://www.w3.org/Style/CSS/Test/CSS2.1/20100127/html4/fixed-table-layout-003.htm Remaining table width is divided evenly among non auto-sized columns (minus borders and cell spacing) * Any remaining horizontal table space is divided evenly among columns which do not have specified widths (minus borders and cell spacing). http://www.w3.org/Style/CSS/Test/CSS2.1/20100127/html4/fixed-table-layout-006.htm > Contextual selectors might be used to cover more standards-conforming > browsers col#firstCol {width: 20%;} should be good enough for all > while using the col width hack for some IE versions. Or maybe you > could set widths just for the first-row cells and use fixed table layout. Correct!! E.g.: IE 7 and Opera 10.10 will fail these tests: http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/TableBugColWidth.html http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/TableColumnPaddingWidth..html but IE8 will pass them (and I hope next release of Opera will). regards, Gérard -- CSS 2.1 Conformance test suite (January 2010) http://www.w3.org/Style/CSS/Test/CSS2.1/20100127/html4/
From: Manuel Collado on 3 Feb 2010 19:19
GTalbot escribi�: > ... >>> col.firstCol { width: 5em } > > a table has only one first column; therefore, using a class here is > not semantically best. An id should be preferred. Id is ideal for > uniquely defined elements; class is for grouping logically elements > together. > >>> col.secondCol { width: 10em } There is a CSS2 selector for this: col { width: 5em } col + col { width: 10em } -- Manuel Collado - http://lml.ls.fi.upm.es/~mcollado |