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: Barely Audible on 3 Feb 2010 06:27 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? Thanks in advance! -- TTFN Jim "Life's tough......It's even tougher if you're stupid." --John Wayne
From: David Stone on 3 Feb 2010 10:59 In article <7st4t1Fs7eU1(a)mid.individual.net>, Barely Audible <anywhere(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? > > Thanks in advance! You can use child selectors (this has come up before in this group) or you can use colgroup/col mark up with appropriate styling. So you might have: <colgroup><col class="firstCol"><col class="secondCol"></colgroup> and col.firstCol { width: 5em } col.secondCol { width: 10em } Here's a page where I've used this approach: http://www.chem.utoronto.ca/~dstone/assist/page1.html (Not entirely optimum html/css for this particular application, but it demonstrates the point.) The potential problem with child selectors is browser compatibility, especially backwards compatibility (and especially for IE!)
From: Jukka K. Korpela on 3 Feb 2010 12:40 David Stone wrote: > col.firstCol { width: 5em } > 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. Contextual selectors might be used to cover more standards-conforming browsers 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. The first question however is "Why would you set column widths, and in which context and how?" In general, browsers aren't that good at calculating suitable column widths (in the absense of authors' suggestions on them), but usually better than most authors (who so often prefer shooting themselves on the foot with px valued widths). -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: David Stone on 3 Feb 2010 13:32 In article <4zian.72641$La7.23461(a)uutiset.elisa.fi>, "Jukka K. Korpela" <jkorpela(a)cs.tut.fi> wrote: > David Stone wrote: > > > col.firstCol { width: 5em } > > 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. I haven't had a chance to look that up - is it the case that agents are _required_ to ignore them, or that the behaviour is left unspecified? As a point of reference, FF 3.5.7, Safari 4.0.4 and Opera 9.2.0 all honour width on col elements (at least provided the width is great enough to accommodate the content). I don't have any flavour of IE handy right now to see what it might do. This is the test page I used - note that increasing the widths on alternating columns confirms that the cited browsers honour the col widths (both the html and css also validate): http://www.chem.utoronto.ca/~dstone/assist/page1.html > Contextual selectors might be used to cover more standards-conforming > browsers 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. > > The first question however is "Why would you set column widths, and in which > context and how?" In general, browsers aren't that good at calculating > suitable column widths (in the absence of authors' suggestions on them), but > usually better than most authors (who so often prefer shooting themselves on > the foot with px valued widths). Can't speak for the original poster. In my case, it is to ensure that users are not subliminally influenced in their choices by apparent differences in column width - although I have no idea if that might be a real concern. At least, the answer grid _looks_ better if the answer choice columns are equal width. I got into a nasty tangle trying to use child selectors on the td's, which is why I resorted to setting widths on the col's instead. I would also prefer if all table rows were equal height but, since I cannot predict the number of text lines in each row - particularly as page width varies - I'm not sure of the best way to achieve this.
From: Jukka K. Korpela on 3 Feb 2010 15:39
David Stone wrote: >> 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. > > I haven't had a chance to look that up - is it the case that agents > are _required_ to ignore them, or that the behaviour is left > unspecified? Sorry, I was thinking of something completely different when I wrote the text you quoted. The width settings can be done via <col> elements. I was thinking about alignment, which I'm actually more worried about and which doesn't work that way, on conforming browsers. >> The first question however is "Why would you set column widths, and >> in which context and how?" In general, browsers aren't that good at >> calculating suitable column widths (in the absence of authors' >> suggestions on them), but usually better than most authors (who so >> often prefer shooting themselves on the foot with px valued widths). > > Can't speak for the original poster. > > In my case, it is to ensure that users are not subliminally influenced > in their choices by apparent differences in column width - although I > have no idea if that might be a real concern. Do you mean differences between column widths in different tables? I don't see why they couldn't be different, if their content so requires. > 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. > I would also prefer if all table rows were equal height but, since I > cannot predict the number of text lines in each row - particularly > as page width varies - I'm not sure of the best way to achieve this. If it's tabular data, I don't see why the rows should be of equal height. Different amount of data requires different heights. -- Yucca, http://www.cs.tut.fi/~jkorpela/ |