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

Tips for preventing file duplication within a Visual Studio project while managing path problems

Is there a way to restore the face's original orientation after it has been rotated

Combine jQuery and CSS to create a scrollable and extended fixed header

Unable to view Ajax requests using Firebug when the header has been altered

Removing the restriction on maximum width to 100% and allowing for automatic height adjustment

Converting HTML content into a single string simplifies data manipulation and extraction

"Bower fetches and installs specific versions of packages from the repository

The D3.js text element is failing to show the output of a function

What is the best way to conceal specific series in a HighCharts legend?

The scope attribute is not functioning as expected in the loopback model

Turn off logging functionality in a Node.JS environment

The Jquery ajax get method is malfunctioning

After Effects Script: Apply various character styles from main text to subtext

Creating collapsible tables with hook functionality in Material-UI

Disregarding boundaries set by divisions

Error 500: Laravel Broadcasting Private Channel authentication failure

js/jquery issue with IE: Scrolling to the bottom of a div upon page load

Angular identifies when a user navigates away from a page

Creating a div that displays only the initial 50 characters through CSS

Having trouble navigating the maze of Express routing