Table With 5 Columns, Use CSS To Determine Each Column Width

kolax

macrumors G3
Original poster
Mar 20, 2007
9,186
115
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?
 

sk3pt1c

macrumors 6502a
Nov 29, 2005
914
5
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...
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,872
2
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).
 

kolax

macrumors G3
Original poster
Mar 20, 2007
9,186
115
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.
 

Dolorian

macrumors 65816
Apr 25, 2007
1,086
0
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!
 

kolax

macrumors G3
Original poster
Mar 20, 2007
9,186
115
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.
 

bradnywells

macrumors newbie
May 27, 2014
1
0
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
 

960design

macrumors 68030
Apr 17, 2012
2,871
851
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.
 

SuperRob

macrumors 6502
Mar 14, 2011
250
0
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.
 

960design

macrumors 68030
Apr 17, 2012
2,871
851
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 ). :)
 

jtara

macrumors 68000
Mar 23, 2009
1,859
456
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.