Variable column widths in CSS

[Certificates]

I'm back again seeking help.

I am trying to convert HTML tables to CSS, but the columns are currently of variable width.

There are currently 14 columns

Is this a practicality ? Or should I stick to HTML.

At present, all the widths are the same which makes it look odd

Current CSS is as follows


table,td,th p { font-size: 15px;font-style:italic;font-weight:bold}
{
border:0px solid black;
}
td
{
text-align:left;border:1px solid black;
}


Thanks

Antony

[Paul_o_b]

The first question is whether this is tabular data or not?

If the answer is tabular data then use a table as that is what it is meant for and is the correct and semantic element to use.

If the answer is that the data is not tabular then the second question would be why has your layout got 14 columns? That would not be practical for most cases.

If you have good reason to have 14 columns and the data is not tabular then you could use the display:table and display:table-cell properties for ie8+ but of course leaves you finding alternatives for ie7 and under (such as floating).

[lucy24]

14 columns? FOURTEEN? Do you mean fourteen items side by side, or does it add up to 14 when you take into account all the <colspan = "4"> and so on?

"Tabular data" doesn't have to mean numbers. If there is a direct relationship between one item and the item to its immediate left or right, it's a table.

I am tempted to say that if there are fourteen columns, it's a table regardless of what else is going on ;);

In any case, please don't set an explicit font-size in pixels. You're just forcing users to change their browser settings to allow for visual impairment or window size, and there goes your whole display. It's especially not a good idea in tables, where there are already a lot of constraints on available width.

15px is probably pretty close to 1em or 100% anyway, so you don't need to say anything. Or rather, you need to say {font-size: inherit; font-family: inherit;} because some browsers will otherwise see fit to put tables into a different size or font. (I don't remember which one but I do remember learning it by direct observation, so I now include it in boilerplate.)

[alt131]

Hi Antony - at this rate you'll be back offering help qute soon :)

In addition to thinking about whether this information is tabular or not, can you clarify whether you want the columns to be a consistent, or a variable width? My reason for asking is that is the thread heading, and you've said they are variable, and then the same. The provided css isn't setting a width, so there may be a bit more to this.

Also - and I know i keep saying this, but your selector is still
table, td, th p - which only applies to <p>'s inside a <th>. As <th> = table heading, it shouldn't really need a <p>

[Certificates]

Well I am transcribing a census here.

There are 14 Coumns and 132 rows so maybe a table is a better option but if CSS is to be the way forward, I don;t want all the column widths the same, It looks odd when a column for the name is as wide as that for his age

Thanks

Antony

[alt131]

There are 14 Coumns and 132 rows so maybe a table is a better option but if CSS is to be the way forward ...

Not quite. This is comparing two things that might not be the same. It is not tables or css. As others have said, if the information is tabular, then it should be marked up in the HTML using tables. css provides style - it isn't a replacement for the HTML elements themselves.

Details such as name/age sound as if there is a relationship between the information so it would be correct to mark it up as a table in the HTML. Table cells will naturally expand/contract depending on the width of the content, so if they are all the same width that's lucky chance or has been set somewhere other than the css provided above.

[Certificates]

Thanks for your response. I shall have to check the HTML in the tables to see why they are all the same width.

Antony