Can I put COLSPAN definitions in my CSS?

Unless I am misunderstanding you, the “real” problem doesn’t sound like a colspan issue but instead about fixing the width of table columns consistently.

I’ll open with the usual advisory message that using tables for page layout is a very bad approach nowadays. It is a relic from the earliest days of HTML before CSS “civilized” web page design. That’s old. Most layouts can be done with more semantically appropriate tags, elements that mean something to screen readers, etc, and are much, much easier to maintain and control. Tables should be reserved for spreadsheet-style data, aka. “tabular” data. I’m sure you’ve heard all of this before, so I’ll stop flogging the dead horse.

It would be very helpful if you could post an example of the problem that you are facing… tables whose columns do not align. You might prefer to create an example and publish it on your site while we talk about it rather than post code here. I envision quite a bit of code, but if you can simplify it so it still demonstrates the problem, that would be a bonus.

In general, tables/table cells adapt to the width and quantity of their contents. You can change that behavior by assigning {table-layout:fixed} to the table. The best way to do this is to put the table inside an outer div container and assign a width of 100% to the table. The common outer framing container will allow the table and cells to be consistently wide and fluid. Then assign percent widths to the columns that add up to exactly 100%. The table columns will maintain those relative widths regardless of their contents.

colspans are for spanning multiple columns within an HTML table. They work fine, if all of the columns are defined in the first row.

This conversation drifted into colspans in the latter half of the thread. I posted a couple of examples near/at the end that may or may not be meaningful to you. No harm in giving them a glance if you are still interested in colspan.
Tables and HTML newsletters are baking my noodle - #2 by ronpat

Hope this helps.

2 Likes