Begin highlighting the columns in the table with color starting from the Nth column onwards using the td

Is there a more efficient way to apply a specific background color to multiple columns in a table without using a CSS class for each column?

I have a large table with many rows and columns, and I want to minimize unnecessary code.

Currently, I am utilizing the td:nth-of-type property like this:

.demo tr.selectedRow td:nth-of-type(9), .demo tr.selectedRow td:nth-of-type(10), .demo tr.selectedRow td:nth-of-type(11), .demo tr.selectedRow td:nth-of-type(12), .demo tr.selectedRow td:nth-of-type(13), .demo tr.selectedRow td:nth-of-type(14), .demo tr.selectedRow td:nth-of-type(15), .demo tr.selectedRow td:nth-of-type(16) { background-color: #fff16b; }
<table border="1" class="demo"> <tr> <td>not selected</td> </tr> <tr class="selectedRow"> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>not selected</td> <td>selected</td> <td>selected</td> <td>selected</td> <td>selected</td>...

I'm looking for ways to streamline this process even further.

The documentation is not very helpful...

htmlcsscss-selectorscss-tables

Answer №1

This tool is incredibly useful. If you need to target elements after the 9th one, try using this CSS code snippet:

Select all TD elements excluding the first 8:

.example tr.selectedItem td:nth-child(n+9) {
  color: blue;
}
<table border="1" class="demo">
  <tr>
    <td>not selected</td><td>not selected</td>
  </tr>
  <tr class="selectedItem">
    <td>selected</td><td>selected</td>
    <td>selected</td><td>selected</td>
    <td>selected</td><td>selected</td>
    <td>selected</td><td>selected</td>
    <td>selected</td><td>selected</td>
  </tr>
  <tr>
    <td>not selected</td><td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td><td>not selected</td>
  </tr>
</table>

Answer №2

Why not have a class for the first eight columns and nothing for the rest? This approach could be effective if all the remaining columns should have the same styling.

It's worth mentioning that this method even works on IE.

An Illustrative Example using colgroup

.colSpecial {
  background-color: #fee;
}

.colDefault {
  background-color: #fff;
  border: 1px solid black;
}

tr:hover {
  background-color: #efe;
}
<table>
  <colgroup>
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
  </colgroup>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

htmlcss

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

Keeping the Bootstrap popover anchored to the content

I have a functional bootstrap popover that includes a time attribute. However, I am looking to enhance its functionality so that it remains open when the mouse is on the content and closes only when the mouse leaves the content. Here is the relevant code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips on keeping these elements centered

I'm having trouble keeping these blocks of code centered. Can someone help me out? Here's the code snippet: main { width: 70%; float: left; clear: both; border- ...

htmlcss

The uniform height of flex columns was spoiled by a child element with a display setting of flex

CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; background-color: #F5F5F5; } body > header { display: flex; position: fixed; width: 100%; height: 60px; align-items: center; background-color: #373737 ...

htmlcssflexbox

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

The submission of the Jquery form is not successful

I am struggling with a form on my page. I want to disable the submit button and display a custom message when submitted, then use jQuery to actually submit the form. <form> <input type="text" name="run"/> <input type=&quo ...

javascripthtmljqueryforms

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Learn the process of updating Datatables' multiple column headers in real-time using ajax and jquery, all without the need to refresh

My goal is to dynamically change the column number and header of a table based on the return value of an AJAX call in conjunction with DataTables jQuery plugin. Below is the JavaScript and jQuery code I am currently using: $( document ).ready(function() { ...

jqueryhtmlajaxdatatables

Leveraging mdbvue within the SAFE Network, style elements are noticeable by their absence

I checked out this handy tutorial But what really caught my attention was this tutorial: After following along, I ended up with the result below: https://i.sstatic.net/asgZs.png It's clear that something is missing in terms of style. As a novice i ...

csswebpackvue.jsmdbootstrap

Is it possible for inline-block list items to wrap words onto new lines?

I'm working on displaying a series of details within an unordered list inline, but facing an issue with some list items being too long for the relatively small area available. This is the unordered list I'm adding to my view: "<ul class=&apo ...

csshtml-listsword-wrap

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

htmlcsswordpress

Locate HTML attribute values with the help of BeautifulSoup

Trying to extract data from HTML using BeautifulSoup has proven to be more challenging than expected. Specifically, I am struggling with utilizing the .find() function correctly in this scenario. Take a look at the HTML snippet below: <div class="a ...

pythonhtmlcssbeautifulsoup

Display information from a MySQL database in a tabular format using PHP

I am currently learning PHP and attempting to retrieve data from a database to display it in an HTML table. However, I am facing an issue where the total number of records returned is 13 but only 12 records are being displayed in the table (it seems to be ...

phpmysqlhtml

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

htmlcssflexbox

Steps to assign a value to a variable upon clicking on text

Struggling to create a form using HTML, CSS, and PHP. The concept involves selecting an option from a dropdown menu and picking a date on a calendar. However, the challenge lies in sending a value to a variable in PHP upon clicking a day. Once the value ...

phphtml

The Modal content in HTML and CSS is innovatively designed and stands out from the rest

.modal-body { height:100%; overflow-y: scroll; } <div id="modal" class="modal fade" role="dialog"> <div class="modal-dialog" style="width:80%;height:100%"> <!-- Modal content--> <div class="modal-content" style="wid ...

htmlcssbootstrap-4

Div alignment issue caused by 'Position:absolute' in Internet Explorer

When using position: absolute on a div, it causes misalignment in Internet Explorer but works correctly in Mozilla Firefox and Chrome. Does anyone have a suggested workaround for this issue? Code http://jsbin.com/uxerus/15/edit ...

jqueryinternet-explorerhtmlcss-position