Colgroup Background Color Not Override Tr Background Color

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs colgroup background color not override tr background color Ask Question Asked 10 years, 5 months ago Modified 5 years ago Viewed 3k times 2

I have a table with a col in colgroup with background-color grey.

I have a tr with background color orange

<table > <colgroup> <col class="col" /> <col /> </colgroup> <tr> <td>1</td> <td>2</td> </tr> <tr class="tr"> <td>3</td> <td>4</td> </tr> </table>

css:

.col{ background-color: grey !important; } .tr{ background-color: orange; } table{ width: 100%; }

I want col color override tr color.

how can i do?

in the example, 3 must be grey but is orange

http://jsfiddle.net/VsgA6/1/

• html
• css

Share Improve this question Follow asked Jul 3, 2014 at 13:41 user3401335user3401335 2,40522 gold badges2020 silver badges3535 bronze badges 1

• jsbin.com/kaciyasa/1/edit – Kheema Pandey Commented Jul 3, 2014 at 13:53

Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

The CSS specification states that the column background is applied only if both the cell and row have transparent backgrounds (see http://www.w3.org/TR/CSS21/tables.html#columns).

You have to set your color on the tr or the td.

For example with td:first-child {background: grey}

Share Improve this answer Follow answered Jul 3, 2014 at 13:50 obourgainobourgain 9,33677 gold badges4444 silver badges5858 bronze badges 1

• 1 Another solution I decided to use was to set the background-colour of the alternate stripes to for example rbga(200,200,200, 0.1). This way, you can see the highlight through the zebra stripes. Very fast and clean solution with few downsides. – Nikolai Hegelstad Commented Mar 24, 2017 at 11:47

Add a comment | 0

If you need first TD in each row grey, use:

td:first-child {background: grey} Share Improve this answer Follow answered Jul 3, 2014 at 13:46 pavelpavel 27.1k1010 gold badges4646 silver badges6262 bronze badges 1

• thanks, but the first col is grey for example, a value in the database cause a column to be grey – user3401335 Commented Jul 3, 2014 at 13:49

Add a comment | 0

try this code

<table > <colgroup> <col class="col" /> <col class="col" /> </colgroup> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td class="tr">4</td> </tr> </table> .col{ background-color: grey !important; } .tr { background-color: orange; } table{ width: 100%; }

DEMO

Share Improve this answer Follow answered Jul 3, 2014 at 13:48 Alex WilsonAlex Wilson 2,4191313 silver badges1313 bronze badges Add a comment | 0

Instead of n-th child TD specs like

TD:first-child {background: grey} TD:nth-child(2) {background: red}

for overriding TR background-color you can also mix the colors by using a partially transparent TR or TD color instead of orange like

.tr { background-color: #FB28; }

and use COL's.

Share Improve this answer Follow answered Dec 20, 2019 at 2:16 kxrkxr 5,46211 gold badge5050 silver badges3535 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• Why do developers love clean code but hate writing documentation?
• This developer tool is 40 years old: can it be improved?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

62 How to get css background color on <tr> tag to span entire row 0 Problem changing background color of tr in firefox using CSS 3 How to stop colgroup styles being overwritten by tr styles? 6 Background color applied to tr doesn't cover full row with insufficient td 0 HTML tr background color without collapsing borders 0 CSS Table TR Background color issue 2 How to make a <col> overrule a <tr> background color? 6 background-color css property not working in table 1 Background-color overlay not working on table tr in Chrome 0 TR background color merges with Table background color

Hot Network Questions

• Answering student's question that is already in the upcoming exam
• What explains the definition of true and false in untyped lambda calculus?
• Is it Appropriate to Request a Seminar Invitation from a University Department as a research Student?
• Removing Matching Pixels?
• What do "messy" weapons do, exactly?
• When shouldn't I use possessive s?
• How does Christine's origin differ in the movie rather than the book?
• Horizontal arrow between two vertical arrows
• Is "Bich" really Latin for "generosity"?
• How to make all math render in a command?
• Why is my LED burning out?
• Why does each page of Talmud end with the first word of the next page?
• How can I get the horizontal spacing to look nicer in math mode when I multiply a vector by a matrix?
• Factorization of maps between locally compact Hausdorff space
• Why do some installers insist on not doing a full frame window replacement?
• What's wrong with my formal translation of "every positive number has exactly two square roots"?
• What are "rent and waistline parties"?
• Is it important that my dishwasher's cabinet seals make contact with the opening?
• Shakespeare and his syntax: "we hunt not, we"
• An extension of Lehmer's conjecture on Ramanujan's tau function
• Dative in front of accusative
• Who is the difference?
• Disk galaxy definition
• If you are working remotely as a contractor, can you be allowed to applying as a business vistor to Australia?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html