Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 6, 2012, 04:26 AM   #1
Kilamite
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: Edinburgh, Scotland
Table With 5 Columns, Use CSS To Determine Each Column Width

I have a table that consists of 5 columns, and the content is populated by PHP/MySQL. I have tried using HTML to define the column widths, which works fine, however as the content varies, the widths change by a few pixels. Not a big deal, but I'd rather keep them from doing that.

I'm already defining the table colouring scheme, padding, borders etc using CSS. I've found using:

table.db-table {table-layout: fixed;}

Will stop the column width's adjusting by a pixel or few each time the content inside the table changes.

However, I cannot define each column width in CSS. Is this possible?
__________________
15" MacBook Pro 2GHz i7 8GB 750GB Hybrid | Mac mini 2.3GHz i7 16GB 1TB Fusion | OS X 10.9.2
iPhone 5 64GB | Apple TV 3 1080p | iOS 7.1
Home Theatre Hackintosh i3 3.5GHz 4GB 3TB | OS X 10.9.2
Kilamite is offline   0 Reply With Quote
Old Oct 11, 2012, 10:17 AM   #2
sk3pt1c
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
you could possibly assign id or class names to each column or just use the child selector to target the n-th child of the table to target them.

i guess if you have a lot of columns that would be a drag though...
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Oct 11, 2012, 02:04 PM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
You can't reliably control the width of a table cells of varying widths and expect cross browser support as well. I suggest either not using widths at all and let the table adjust or wrap the td contents in a DIV (or any other block level elements) and target that element, which means something like: <td><div id='col1'>data</div></td> for example. If the table itself is created via code, dynamically, you could also assign classes and ID then and apply to each td. But keeping it simple is best advice (don't use widths).
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Oct 13, 2012, 10:09 AM   #4
Kwill
macrumors 68000
 
Kwill's Avatar
 
Join Date: Mar 2003
Can you use column percentages of the overall defined width?
__________________
o ::::: ::::::::

@ClinicalPosters
Kwill is offline   0 Reply With Quote
Old Oct 13, 2012, 10:15 AM   #5
Kilamite
Thread Starter
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: Edinburgh, Scotland
I did try a few tricks, including percentages which I couldn't get to work.

The width of the overall table remains constant, but the individual cell widths aren't fixed and I couldn't get them to remain fixed.
__________________
15" MacBook Pro 2GHz i7 8GB 750GB Hybrid | Mac mini 2.3GHz i7 16GB 1TB Fusion | OS X 10.9.2
iPhone 5 64GB | Apple TV 3 1080p | iOS 7.1
Home Theatre Hackintosh i3 3.5GHz 4GB 3TB | OS X 10.9.2
Kilamite is offline   0 Reply With Quote
Old Oct 13, 2012, 10:19 AM   #6
Evoken
macrumors 6502a
 
Evoken's Avatar
 
Join Date: Apr 2007
Quote:
Originally Posted by Kilamite View Post
However, I cannot define each column width in CSS. Is this possible?
You can use the CSS :nth-child selector to target specific columns and assign each the width you want.

This would need a couple of things to work in all browsers tho, you should include Modernizr and Selectivizr in your site to make the CSS3 selectors available in browsers that do not support them (like Internet Explorer, for example).

Using the :nth-child selector can be a bit confusing at first, so here are a couple of examples:

table tr:nth-child(3) { width: 20% } - This would select the third column.

table tr:nth-child(5) { width: 50% } - This would select the fifth column.

table tr:nth-child(2n) { width: 15% } - This would select every second column.

Hope you find this helpful!
__________________
MacBook Pro 13" i5 2.5GHz
Google Nexus 7 32GB
Samsung Galaxy S3
Evoken is offline   0 Reply With Quote
Old Oct 13, 2012, 10:21 AM   #7
Kilamite
Thread Starter
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: Edinburgh, Scotland
Thanks Evoken, that sounds exactly what I'm trying to do.

I'll have a play with your examples later and see if I can get it to do what I want.
__________________
15" MacBook Pro 2GHz i7 8GB 750GB Hybrid | Mac mini 2.3GHz i7 16GB 1TB Fusion | OS X 10.9.2
iPhone 5 64GB | Apple TV 3 1080p | iOS 7.1
Home Theatre Hackintosh i3 3.5GHz 4GB 3TB | OS X 10.9.2
Kilamite is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 10:37 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC