How To Make First Column Of A Row Black And Second Column Red

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 How to make first column of a row black and second column red Ask Question Asked 12 years, 8 months ago Modified 5 years, 9 months ago Viewed 24k times 8

I would like to give a css class to a row and i would like to make the first column black and the second column red. I dont want to use colgroup because this is a row specific action not whole table should be effected.

• css

Share Improve this question Follow edited Oct 25, 2018 at 6:32 Alex Kulinkovich 4,7281515 gold badges4949 silver badges5454 bronze badges asked Mar 4, 2012 at 13:23 rematnarabrematnarab 1,31555 gold badges2525 silver badges4444 bronze badges 1

• 1 Can you not just give each cell a class and style with CSS? – AlexKempton Commented Mar 4, 2012 at 13:27

Add a comment |

5 Answers 5

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

You could use:

td { color: black; } td:nth-child(2) { color: red; } Share Improve this answer Follow answered Mar 4, 2012 at 13:26 QtaxQtax 33.9k99 gold badges8888 silver badges125125 bronze badges 2

• Thisi s possible without CSS3 for better browser support. – Smamatti Commented Mar 4, 2012 at 13:30
• @Qtax how about every odd rows second column? Would be nested? tr:nth-child(even) { td:nth-child(2) { color: red; }} – 3kstc Commented Mar 16, 2019 at 11:52

Add a comment | 9

This is possible without CSS3 !

Sample http://jsfiddle.net/Q3yu5/1/

CSS

tr.special_row td { background-color: #000; } tr.special_row td + td { background-color: #f00; } tr.special_row td+td+td { background-color: #fff; }

HTML

<table> <tr class="special_row"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Share Improve this answer Follow edited Mar 4, 2012 at 18:35 answered Mar 4, 2012 at 13:29 SmamattiSmamatti 3,92133 gold badges3333 silver badges4343 bronze badges 2

• 1 I'm afraid this is not exactly what @rematnarab was looking for. I didn't keep in mind, that not the whole table should be affected. edited tr to a more specific rule. – Smamatti Commented Mar 4, 2012 at 18:33
• Just a note: I was in the need of your PREVIOUS Version of the code. +1 for review log! – Michel Ayres Commented Mar 13, 2014 at 20:46

Add a comment | 3

... this is a row specific action not whole table should be effected.

Then applying different styles to your first and second column of the given row could be useful:

<style type="text/css"> td.first { background-color: black; color: white; } td.second { background-color: red; color: white; } </style> <table> <tr> <td class="first">1st row, 1st column</td> <td class="second">1st row, 2nd column</td> </tr> <tr> <td>2nd row, 1st column</td> <td>2nd row, 2nd column</td> </tr> </table> Share Improve this answer Follow edited Mar 4, 2012 at 13:42 answered Mar 4, 2012 at 13:34 JuvanisJuvanis 25.9k55 gold badges7171 silver badges8888 bronze badges 1

• +1 Whoops. You are right! --> not whole table should be effected – Smamatti Commented Mar 4, 2012 at 18:31

Add a comment | 2

In CSS3 you can use the :nth-child() pseudo-class.

See the Docs for how to use it. Also, as of early 2019, there's barely a reason not to use CSS3 selectors.

Share Improve this answer Follow edited Feb 3, 2019 at 14:12 answered Mar 4, 2012 at 13:27 m02ph3u5m02ph3u5 3,16177 gold badges4141 silver badges5757 bronze badges Add a comment | 0

You need to create 2 types of CSS. For each row you add the CSS you want.

Share Improve this answer Follow edited Mar 4, 2012 at 22:15 FelipeAls 22.1k99 gold badges5656 silver badges7474 bronze badges answered Mar 4, 2012 at 13:26 OferOfer 5,16966 gold badges2222 silver badges2727 bronze badges 2

• 1/ Which type of CSS? Do you mean CSS rules? 2/ Are you saying that you add style attributes on the first two cells of each row? Better separate CSS from HTML whenever it's possible (and it's possible here) – FelipeAls Commented Mar 4, 2012 at 22:13
• exactly, this css can reuse in the future – Ofer Commented Mar 5, 2012 at 6:56

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

• css

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Related

1 How to set background color to the column using CSS? 4 change color for second column 0 Alternate row color 0 How to change the color of first row of first table using css 2 how to change the background color of first row in html table and all other rows alternate color 2 Alternating table row color with the first row a different color 5 change color of rows in a table in HTML and CSS 0 How can I change the background color for a single column in html? 3 Alternate row colours from 2nd row of the table using CSS 0 how to style rows with a specific position for each column (CSS)

Hot Network Questions

• Where in the Gospels does Jesus explain what 'The Truth' is?
• How can I solve a multi-delay differential equation?
• C# basic calculator
• Testing Puzzles for Puzzle Book: Enigmatic Puzzle
• Superimposed triangles
• Low Resolution in Org Latex Preview
• Is partial correctness decidable?
• box several horizontally connected cells in an array. Is there a command similar to \Aboxed?
• Brushing pastries with jam
• Scandinavian film, 1980s, possibly called Royal Toilet?
• Circular modal logic question: Does it makes sense to ask if it is possible for the set of possible worlds to be empty?
• How to DSolve[{-0.8*y'[x]*y''[x]/(1 + (y'[x])^2)^1.4 == 0.77781490, y[0] == 0, y[1] == 1}, y[x], x]
• Top loading an Aircraft vs bottom Loading
• Bleeding radiators
• Mind the gap between……
• How does the Warlock's invocation Gaze of Two Minds interact with a creature with the Invisible Condition?
• What kind of range hood do I need?
• Categories in which isomorphism of stalks does not imply isomorphism of sheaves
• Can Netanyahu use sovereign or diplomatic immunity as his defence to evade the arrest warrant issued by the ICC?
• safe divide command for pgfmathparse to enable equality checks involving division by zero
• What is the correct article before "/s/ sound"?
• The Talking Dog's Treats
• How were lead sheets made in the Graeco-Roman world?
• What should I do with a package that is delivered to my address but the name is wrong?

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.

default