Shade the entire td column in different colors depending on the characteristics of th

Question

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it:

<table>
<thead>
<tr>
    <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Asistent</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Ambulantier</th>
    <th style="text-align: center; vertical-align: center;">Ambulanta</th>
    @foreach($dates as $date)
    @if($date['day_name'] == 'S' || $date['day_name'] == 'D')
    <th style="width: 40%; text-align: center; vertical-align: center; font-weight: bold; color: red;">{{$date['day']}}<br> {{$date['day_name']}}</th>
    @else
    <th style="width: 40%; text-align: center; vertical-align: center; font-weight: bold;">{{$date['day']}}<br> {{$date['day_name']}}</th>
    @endif
    @endforeach
</tr>
</thead>
<tbody>
@foreach($interventions as $intervention)
<tr>
<td>0</td>
<td>{{$intervention->employee_one->name}}</td>
<td>{{$intervention->employee_two->name}}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>

When this code runs, it produces the output shown in this screenshot: https://i.stack.imgur.com/4Hsun.png

I've noticed that some numbers in the header are displayed in red. My question is, how can I make the entire column red if the respective <th> is also red?

One solution I consider is using JavaScript, which could look like this (just a concept, not the actual code):

if(header(current_td).hasProperty('color: red')) {
   apply(color.red);
}

Any ideas on how to achieve this effect?

javascript html jquery css laravel

Answer 1

Answer №1

If you want to apply styling with the colgroup element, you can follow this example:

<style>
.red-background {
background-color: red;
}
</style>
<table>
  <colgroup>
    <col>
    <col>
    <col>
<col>

@foreach($dates as $date)
    @if($date['day_name'] == 'S' || $date['day_name'] == 'D')
<col class="red-background ">
    
    @else
<col>
  
    @endif
    @endforeach

  </colgroup>

<thead>
<tr>
    <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Asistent</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Ambulantier</th>
    <th style="text-align: center; vertical-align: center;">Ambulanta</th>
    @foreach($dates as $date)
 
    <th style="width: 40%; text-align: center; vertical-align: center; font-weight: bold;">{{$date['day']}}<br> {{$date['day_name']}}</th>
    

    @endforeach
</tr>
</thead>
<tbody>
@foreach($interventions as $intervention)
<tr>
<td>0</td>
<td>{{$intervention->employee_one->name}}</td>
<td>{{$intervention->employee_two->name}}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>

Answer 2

If you want to apply styling with the colgroup element, you can follow this example:

<style>
.red-background {
background-color: red;
}
</style>
<table>
  <colgroup>
    <col>
    <col>
    <col>
<col>

@foreach($dates as $date)
    @if($date['day_name'] == 'S' || $date['day_name'] == 'D')
<col class="red-background ">
    
    @else
<col>
  
    @endif
    @endforeach

  </colgroup>

<thead>
<tr>
    <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Asistent</th>
    <th style="font-weight: bold; width: 210%; height: 25; text-align: center; vertical-align: center;">Ambulantier</th>
    <th style="text-align: center; vertical-align: center;">Ambulanta</th>
    @foreach($dates as $date)
 
    <th style="width: 40%; text-align: center; vertical-align: center; font-weight: bold;">{{$date['day']}}<br> {{$date['day_name']}}</th>
    

    @endforeach
</tr>
</thead>
<tbody>
@foreach($interventions as $intervention)
<tr>
<td>0</td>
<td>{{$intervention->employee_one->name}}</td>
<td>{{$intervention->employee_two->name}}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>

Answer 3

Answer №2

Instead of styling each cell individually, using colgroup allows you to style all the cells in a column at once.

.highlight{
    background-color: #ffe8d4;
}

<table>
    <colgroup>
        <col />
        <col class="highlight" />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>3</td>
            <td>2</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

Answer 4

Instead of styling each cell individually, using colgroup allows you to style all the cells in a column at once.

.highlight{
    background-color: #ffe8d4;
}

<table>
    <colgroup>
        <col />
        <col class="highlight" />
        <col />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>3</td>
            <td>2</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

Answer 5

Answer №3

When using javascript:

const rows = document.querySelectorAll('#table tr');
const headers = document.querySelectorAll('#table th');

for (let row = 1; row < rows.length; row++) {
  for (let col = 0; col < headers.length; col++) {
    if (headers[col].style.color == "red") {
      rows[row].children[col].style.color = "red";
    }
  } 
}

<table id="table">
  <tr>
    <th>A</th>
    <th>B</th>
    <th style="color: red;">C</th>
    <th>D</th>
  </tr>

  <tr>
    <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>

  <tr>
    <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>

Answer 6

When using javascript:

const rows = document.querySelectorAll('#table tr');
const headers = document.querySelectorAll('#table th');

for (let row = 1; row < rows.length; row++) {
  for (let col = 0; col < headers.length; col++) {
    if (headers[col].style.color == "red") {
      rows[row].children[col].style.color = "red";
    }
  } 
}

<table id="table">
  <tr>
    <th>A</th>
    <th>B</th>
    <th style="color: red;">C</th>
    <th>D</th>
  </tr>

  <tr>
    <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>

  <tr>
    <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>

Answer 7

Answer №4

By exclusively using JavaScript with inline styling, you have the ability to achieve a similar result as shown below:


<script type="text/javascript">
    window.onload = () => {
        const ths = document.querySelectorAll('thead tr th');
        for (let i = 0; i < ths.length; i++) {
            if (ths[i].style.color === "red") {
                const trs = document.querySelectorAll('tbody tr');
                for (tr of trs) {
                    tr.children[i].style.color = "red";
                }
            }
        }
    }
</script>

Answer 8

By exclusively using JavaScript with inline styling, you have the ability to achieve a similar result as shown below:


<script type="text/javascript">
    window.onload = () => {
        const ths = document.querySelectorAll('thead tr th');
        for (let i = 0; i < ths.length; i++) {
            if (ths[i].style.color === "red") {
                const trs = document.querySelectorAll('tbody tr');
                for (tr of trs) {
                    tr.children[i].style.color = "red";
                }
            }
        }
    }
</script>

Shade the entire td column in different colors depending on the characteristics of th

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Tips for utilizing the find function with nested documents in MongoDB in conjunction with Next.js?

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Is there a way to differentiate between a browser application running on a local development server and an online staging server?

Express.js does not recognize the req.query value

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

How do the scopes of a controller and a directive's controller differ from each other?

Cannot locate module: Unable to resolve 'encoding' in '/Users/dev/node_modules/node-fetch/lib'

The contents of a Javascript array are not appearing within a div element

Sharing a Promise between Two Service Calls within Angular

Using JQuery to swap out all URLs on a webpage?

Text enhancement with text-shadow in jQuery and CSS

Steps for eliminating redundant lines in a CSS drop-down navigation bar

Utilizing Discord.js to enable a command for a particular channel

The curious case of unusual behavior in jQuery's livequery() method

What is causing the 'transitionend' event to trigger multiple times?

Toggling with Jquery when an image is clicked

Wrapping an <h1> tag inside an <a> link can create unwanted empty space on a web page

Tips for creating a filter that meets multiple conditions in HTML

By default, apply the active class to the initial element in the list and update the active class upon clicking in Next.js