Highlight Table Row using CSS
You can use CSS without any javascript to make the row of a table highlight on hover. All it requires is that the use the pseudo class :hover to add the effect to whatever html element you choose.
In this case we would add it to a table row using a stylesheet rule as in this CSS code example below:
tr:hover {
background-color: #ffff99;
}
The rule above will apply to every row on every table on your site and so you probably want to use a class or ID to limit this effect to tables that you specifically choose which is what we'll do in the following example.
An Example of Table Row Highlighting on Hover
Here we have a working example of a table that highlights rows on hover that just uses CSS to achieve this effect. Just mouseover the table to see the effect in action.
Text 1A | Text 1B | Text 1C |
Text 2A | Text 2B | Text 2C |
Text 3A | Text 3B | Text 3C |
The CSS Table Code
Copy the required CSS and HTML Code for this Table from the box below:
Browser Support
Browser support for the :hover pseudo class on all applicable elements (in other words not just on links) is pretty solid for all modern browsers.
As always the question comes down to Internet Explorer and its support for once is surprisingly quite good here on older version of Internet Explorer. IE 7 and up will support the general use of the hover effect with one caveat.
The html page must have a <!DOCTYPE> on it. If it does not have a doctype then the hover effect will not work in pretty much all versions of IE. It's a small issue but it may be of consequence if you're stuck developing on a fairly inflexible system and you need to work on a page without a doctype.
The Most Popular Tools
- Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
- Random Sentence Generator: Create random sentences for creative brainstorming.
- Random Number Generator: Generate some random numbers in a specific number range.
- Remove Line Breaks: Remove unwanted line breaks from your text.
- Random Choice Generator: Let this tool make a random decision for you.
- Reverse Text Generator: create social media posts or text messages in reverse or mirrored text
- Convert Word to HTML: Automatically convert word contents to HTML code.
- Text to HTML: Quickly change plain text into HTML paragraphs.
- HTML to Text: Remove HTML tags, leaving only text content.
- Alphabetical Order: Alphabetize lists, or other text content with this tool.
- Random Decision Maker: Generate a random decision with this app.
- Capitalize the First letter of Sentences
- HTML Table Generator: Generate the code for a simple HTML table.
- Word Counter: Count the number of words in your text.
- Remove Duplicate Lines: Remove duplicate lines from a text file.
- HTML Compression: Compress HTML contents into a smaller size.
The Newest Tools by Category
Text Fixing Tools
- Remove Line Breaks
- Add Line Breaks Online
- Remove Duplicate Lines
- Paragraph to Single Line
- Remove Extra Whitespaces
- Uppercase or Lowercase Text
- Unscramble Letters to Make Words
HTML Coding Tools
- Remove HTML Tags from a String
- HTML Text Generator
- HTML List Generator
- Convert URLs to HTML Links
- Convert CSV Text to HTML Table
- HTML Character Encoding Tool
Word & Language Tools
- Word Counter
- Title Capitalization Tool
- Page Title and Description Letter Counter
- List of Common Words
- Plural Noun Generator
- Random Nouns Generator
- Random Letter Generator