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

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

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

Can you use column percentages of the overall defined width?

Kilamite said:

However, I cannot define each column width in CSS. Is this possible?

Click to expand...

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!

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

Evoken has it right.
http://css-tricks.com/how-nth-child-works/

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

960design said:

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

Click to expand...

Always.

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.

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

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.