Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 6, 2012, 05:26 AM   #1
Kilamite
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: 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.10
iPhone 5 64GB | Apple TV 3 1080p | iOS 8
Home Theatre Hackintosh i3 3.5GHz 4GB 6TB | OS X 10.9
Kilamite is offline   0 Reply With Quote
Old Oct 11, 2012, 11: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, 03:04 PM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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, 11: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, 11:15 AM   #5
Kilamite
Thread Starter
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: 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.10
iPhone 5 64GB | Apple TV 3 1080p | iOS 8
Home Theatre Hackintosh i3 3.5GHz 4GB 6TB | OS X 10.9
Kilamite is offline   0 Reply With Quote
Old Oct 13, 2012, 11:19 AM   #6
Dolorian
macrumors 65816
 
Dolorian'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
Dolorian is offline   0 Reply With Quote
Old Oct 13, 2012, 11:21 AM   #7
Kilamite
Thread Starter
macrumors G3
 
Kilamite's Avatar
 
Join Date: Mar 2007
Location: 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.10
iPhone 5 64GB | Apple TV 3 1080p | iOS 8
Home Theatre Hackintosh i3 3.5GHz 4GB 6TB | OS X 10.9
Kilamite is offline   0 Reply With Quote
Old May 28, 2014, 02:57 AM   #8
bradnywells
macrumors newbie
 
Join Date: May 2014
column

for column with better use like this...

td:nth-child(1)
{
width:100px;
}
td:nth-child(2)
{
width:200px;
}
td:nth-child(3)
{
width:300px;
}

.....
.......

More examples...CSS Table styling

bradny
bradnywells is offline   0 Reply With Quote
Old May 28, 2014, 11:04 AM   #9
Flood123
macrumors 6502a
 
Flood123's Avatar
 
Join Date: Mar 2009
Location: Living Stateside
Evoken has it right.
http://css-tricks.com/how-nth-child-works/
__________________
Yada, yada, yada.

Last edited by Flood123; May 28, 2014 at 11:36 AM.
Flood123 is offline   0 Reply With Quote
Old May 30, 2014, 08:22 AM   #10
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
<cough>the undead thread<cough,cough>
I was working on a calendar and just used unordered lists to generate the content. So much easier to style.
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old May 30, 2014, 08:28 AM   #11
NutsNGum
macrumors 68030
 
NutsNGum's Avatar
 
Join Date: Jul 2010
Location: Glasgow, Scotland
Quote:
Originally Posted by 960design View Post
<cough>the undead thread<cough,cough>
I was working on a calendar and just used unordered lists to generate the content. So much easier to style.
Always.
NutsNGum is offline   0 Reply With Quote
Old May 30, 2014, 11:28 AM   #12
SuperRob
macrumors regular
 
Join Date: Mar 2011
If you're adhering to current guidelines, Tables should only be used for tabular data. The OP never mentioned what he was displaying, but I usually find when I'm having a hard time getting what I want to display properly, I'm probably not using the correct elements for it.

In this case, I would have just had each bit of data in their own DIV, rather than tables or an unordered list (because the data may already be an unordered list in the db). Then, I can use CSS to set them however I like, and if later on we reskin the site and don't want columns anymore, it's easy to just change the CSS and BOOM ... new layout without having to change the HTML.
SuperRob is offline   0 Reply With Quote
Old May 30, 2014, 02:40 PM   #13
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
What is the definition of tabular data, really?
A calendar is really just a list of days. The display depends on the device, when you are viewing my calendar on a larger display it looks like the traditional calendar, when you view it on a smaller screen the calendar becomes a vertical listing of days. Much easier to read and swipe through.

I only use html tables when I'm actually displaying data that belongs in a spreadsheet. Calendars, not so much. Payroll, yep ( but I'm softening them up ).
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Jun 3, 2014, 03:49 PM   #14
jtara
macrumors 65816
 
Join Date: Mar 2009
If you are tempted to use table layout for something that isn't a table, you probably should be using flex box CSS.

Not for old browsers, though, and you do have to deal with multiple prefixed versions and 3 different variations.
jtara 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

Similar Threads
thread Thread Starter Forum Replies Last Post
applescript align column in word table Freez Mac Programming 2 Jan 25, 2014 11:23 AM
Finder column view modify width of active column foxs Mac Programming 6 Jul 24, 2013 08:14 AM
How do I remove "Bookmark" column & only have "Address" column in a bookmarks folder? oolala iMac 0 Jul 12, 2013 11:40 PM
reorder columns in itunes column browser? ac4lt OS X 6 Nov 27, 2012 04:39 PM
Getting table column widths right Maury Mac Programming 0 Jun 25, 2012 09:00 AM

Forum Jump

All times are GMT -5. The time now is 05:37 AM.

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

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