HTML table colgroup element is not working

Question

I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on XHTML?

I know I could add a "class" attribute on each <td>, but that seems weak.

score 51 · Accepted Answer · edited Mar 12 '23 at 19:01

51

That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.

Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.

edited Mar 12 '23 at 19:01

Peter Mortensen

30,738
21
105
131

answered Sep 07 '10 at 12:39

Aaron Digulla

321,842
108
597
820

thxs! it seems that html5 will make colgroup work.. but until then, i'll use classes or the nth-child – pleasedontbelong Sep 07 '10 at 12:54
3

The page you refer to says _The tag is supported in all major browsers_ Maybe you should remove the reference, because they are misinforming people. – Jannie Theunissen Aug 14 '12 at 12:36
I agree with @JannieT, this appears to be supported by all major browsers. See: http://reference.sitepoint.com/html/colgroup and http://webdesign.about.com/od/htmltags/p/bltags_colgroup.htm – Michael La Voie Apr 15 '13 at 22:20
2

@MichaelLaVoie: While the *element* is supported by all major browser, the *attributes* aren't supported everywhere. On your first link, it says **A better approach is to apply class names to the respective colgroup elements, then let CSS styling take care of alignment, colors, widths, and so on.** – Aaron Digulla Apr 16 '13 at 08:12
@JannieT: Of the attributes, only `width` is supported by all browser and even that is very limited: It only allows a number (pixel width) or percentage. – Aaron Digulla Apr 16 '13 at 08:15
I downvoted this because it does not explain why not use colgroup width. It works great for me setting column widths dynamically, and when you have colspans (merged cells) trying to dynamically set the corrects widths yourself is a nightmare. – pilavdzice Mar 18 '14 at 23:02
@pilavdzice: I agree with `colspan`. My advice is for static layouts. When you have JavaScript to calculate the pixel widths, then `col` become much more useful again. – Aaron Digulla Mar 19 '14 at 08:44
The references in the accepted answer (sitepoint.com and about.com) are both broken now, but the answer is still somewhat useful. – White_Rabbit Apr 23 '20 at 09:39
@White_Rabbit Thanks, fixed. – Aaron Digulla Apr 30 '20 at 15:58
I have a class specifying `text-align: center` that works when applied to a `td` but not when applied to the entire `col`... why might that be? – Mentalist Jul 20 '21 at 14:37
Agreed, `text-align` does not work on the entire `col`. But this code centers column 3: `thead th:nth-child(3), tbody td:nth-child(3) { text-align: center}` – Niels Holst Aug 08 '23 at 19:32

score 9 · Answer 2 · edited Mar 12 '23 at 19:02

9

Set your table-layout to auto instead of fixed...

table {table-layout: auto;}

My personal site supports multiple themes and I see these kinds of differences all the time.

edited Mar 12 '23 at 19:02

Peter Mortensen

30,738
21
105
131

answered Apr 25 '13 at 21:40

John

1
13
98
177

1

Fantastic property! :) https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout – Volker E. Jun 11 '13 at 20:33

score 3 · Answer 3 · answered Sep 25 '20 at 15:04

Here is a trick I used which actually worked well. In an generic (site wide) css file I put:

.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}

and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.

Then on each table I could define the width with a style such as:

<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">

This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:

document.getElementById("tbl1").style.setProperty("--w2", "123px");

The above simply changes the width of column 2 by changing the --w2 variable value.

score 2 · Answer 4 · edited Mar 12 '23 at 19:04

2

You could use CSS selectors to get similar results without adding extra classes.

As an example if you want to give specific style to a second column you can use:

table>tbody>td:nth-child(2){font-weight: bolder;}

edited Mar 12 '23 at 19:04

Peter Mortensen

30,738
21
105
131

answered May 06 '16 at 06:45

ramjamx

21
3

score 1 · Answer 5 · edited Mar 12 '23 at 19:06

1

If you really need to use cols tags without React restriction then dangerouslySetInnerHTML will help:

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

Note that while this works, this is not the recommended way to work with React.

edited Mar 12 '23 at 19:06

Peter Mortensen

30,738
21
105
131

answered Oct 19 '19 at 08:11

gsouf

901
10
25

score 1 · Answer 6 · edited Apr 23 '20 at 13:20

1

So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:

width
borders
background colors
visibility

Source: https://www.w3.org/TR/CSS21/tables.html#columns

edited Apr 23 '20 at 13:20

White_Rabbit

115
2
7

answered Dec 12 '19 at 21:53

Rob Kovacs

1,077
9
8

White_Rabbit · Answer 7 · 2020-04-23T10:03:51.933

In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements

References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns

You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.

I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)

<col style="width: 13em">

sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.

score 0 · Answer 8 · answered Aug 12 '22 at 05:00

0

It is working for me like this with colgroup and col

<colgroup  align="center">
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:green">
</colgroup>

answered Aug 12 '22 at 05:00

Ninad Pingale

6,801
5
32
55

HTML table colgroup element is not working

8 Answers8

Linked