How To Make First Column Of A Row Black And Second Column Red
Có thể bạn quan tâm
-
- Home
- Questions
- Tags
- Users
- Companies
- Labs
- Jobs
- Discussions
- Collectives
-
Communities for your favorite technologies. Explore all Collectives
- Teams
Ask questions, find answers and collaborate at work with Stack Overflow for Teams.
Explore Teams Create a free Team - Teams
-
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 CollectivesTeams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about TeamsGet 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, 4 months ago Modified 5 years, 5 months ago Viewed 23k times 8I 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.
Share Improve this question Follow edited Oct 25, 2018 at 6:32![Alex Kulinkovich's user avatar](https://i.sstatic.net/XBGqy.jpg?s=64)
- 1 Can you not just give each cell a class and style with CSS? – AlexKempton Commented Mar 4, 2012 at 13:27
5 Answers
Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 15You could use:
td { color: black; } td:nth-child(2) { color: red; } Share Improve this answer Follow answered Mar 4, 2012 at 13:26- 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
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- 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
... 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![Juvanis's user avatar](https://i.sstatic.net/uO6Db.png?s=64)
- +1 Whoops. You are right! --> not whole table should be effected – Smamatti Commented Mar 4, 2012 at 18:31
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![m02ph3u5's user avatar](https://i.sstatic.net/W8eJ5.png?s=64)
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- 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
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 discardedSign up or log in
Sign up using Google Sign up using Email and Password SubmitPost as a guest
Name EmailRequired, but never shown
Post Your Answer DiscardBy 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
or ask your own question.- The Overflow Blog
- How to build open source apps in a highly regulated industry
- Community Products Roadmap Update, July 2024
- Featured on Meta
- We spent a sprint addressing your requests — here’s how it went
- Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
- Policy: Generative AI (e.g., ChatGPT) is banned
- The [lib] tag is being burninated
- What makes a homepage useful for logged-in users
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
- Correlation for Small Dataset?
- How to handle a missing author on an ECCV paper submission after the deadline?
- Why is Uranus colder than Neptune?
- Why does Paul's fight with Feyd-Rautha take so long?
- Moving with a questionable advisor
- Does the decision of North Korea sending engineering troops to the occupied territory in Ukraine leave them open to further UN sanctions?
- Does concentrating on a different spell end a concentration spell?
- How do I prevent losing the binoculars?
- Is there any legal justification for content on the web without an explicit licence being freeware?
- Is anything implied by the author using the (Greek) phrase translated "work with your hands" in 1 Thessalonians 4:11?
- What’s the highest salary the greedy king can arrange for himself?
- Can someone explain the Trump immunity ruling?
- Times of a hidden order
- Is "conversational" used correctly in this context?
- Why would a plane be allowed to fly to LAX but not Maui?
- Remove duplicates in file (without sorting!) leaving the _last_ of the occurences
- Is there an economic incentive to use p2wsh over p2tr?
- Unsorted Intersection
- Are comments obsolete in favor of Generative AI?
- What does '\($*\)' mean in sed regular expression in a makefile?
- Could someone translate & explain the Mesorah?
- Travel to Mexico from India, do I need to pay a fee?
- Is non-temperature related Symmetry Breaking possible?
- Books using the axiomatic method
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
defaultTừ khóa » Html Table First Column Background Color
-
How To Set Background Color In The First Column Of A Table (HTML ...
-
Coloring CSS Tables - HTML
-
Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background ...
-
Why Table Bgcolor Is No Longer Valid Code (And What To ... - HTML
-
Table Colors & Background : MGA - Web Development Tutorials
-
HTML Table Styling - W3Schools
-
: The Table Row Element - HTML - MDN Web Docs - Mozilla How To Change The Background Color Of An HTML Table - ThoughtCo
Setting Table Colors - Documentation For Action Request System 21.3
HTML And CSS Tutorial: How-To's And Miscellaneous
HTML Table Basics
Change Background Color Of First Column In Pivot T... - Qlik Community
HTML Table Basics - Learn Web Development | MDN
How To Structure An HTML Document? - ETSAV
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu