Highlight table TD / Column

[waynede-1986]

Hello,

Using CSS and radio buttons (Bootstrap) is it possible to highlight multiple td's / column when one of the radio's is selected?

Thanks

[GeorgiosDrivas]

To my knowledge, you can achieve this by writing some CSS. You will have to use the :checked pseudo-class and nth-child selectors.

For example:

    
    <div class="container mt-4">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>
                    <input type="radio" id="col1" name="highlight">
                    <label for="col1">Select</label>
                </th>
                <th>
                    <input type="radio" id="col2" name="highlight">
                    <label for="col2">Select</label>
                </th>
                <th>
                    <input type="radio" id="col3" name="highlight">
                    <label for="col3">Select</label>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Col 1</td>
                <td>Row 1 Col 2</td>
                <td>Row 1 Col 3</td>
            </tr>
            <tr>
                <td>Row 2 Col 1</td>
                <td>Row 2 Col 2</td>
                <td>Row 2 Col 3</td>
            </tr>
            <tr>
                <td>Row 3 Col 1</td>
                <td>Row 3 Col 2</td>
                <td>Row 3 Col 3</td>
            </tr>
        </tbody>
    </table>
</div>

This is a basic HTML with what I believe you have in mind. With a CSS like this:

<style>
        input[type="radio"]:checked + label {
            background-color: #f8d7da; /* Highlight the header */
        }

        input[type="radio"]:checked + label + table td:nth-child(2) {
            background-color: #f8d7da; /* Highlight second column */
        }

        input[type="radio"]:checked + label + table td:nth-child(3) {
            background-color: #d4edda; /* Highlight third column */
        }
    </style>

You can target specific tds.