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

[Kilamite]

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]

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]

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).

[Kwill]

Can you use column percentages of the overall defined width?

[Kilamite]

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.

[Evoken]

Originally Posted by Kilamite

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!

[Kilamite]

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.