CODEWITHSUNDEEP
htmlcsshtml-table
pleasedontbelong
pleasedontbelong

Reputation: 20102

HTML table colgroup element is not working

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.

Upvotes: 45

Views: 55966

Answers (8)

gsouf
gsouf

Reputation: 1113

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.

Upvotes: 1

ramjamx
ramjamx

Reputation: 21

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;}

Upvotes: 2

John
John

Reputation: 13729

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.

Upvotes: 9

Aaron Digulla
Aaron Digulla

Reputation: 328594

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.

Upvotes: 55

Ninad Pingale
Ninad Pingale

Reputation: 7069

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>

Upvotes: 0

Mike in Canada
Mike in Canada

Reputation: 61

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.

Upvotes: 3

Rob Kovacs
Rob Kovacs

Reputation: 1087

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

Upvotes: 1

White_Rabbit
White_Rabbit

Reputation: 155

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.

Upvotes: 3

Related Questions