How Can You Highlight Rows and Columns in Tables with CSS?

CSS Highlights for Cols, Colgroups, and Rows Enhance Interactive Tables

High tables are typically designed to display complex data organization, where visually highlighting specific sections enhances user comprehension. Traditionally, the :hover pseudo-class is applied to a single element, such as a table cell. However, it is possible to extend this functionality to group elements (such as columns or rows) using CSS.

Using ::before and ::after Pseudo-Elements

By leveraging the ::before and ::after pseudo-elements, highlighting can be applied beyond the selected element. These elements essentially create virtual elements that can be placed relative to their parent.

Applying Highlights to Rows and Columns

To apply highlighting to rows and columns, using the following steps:

• Create a ::before and ::after pseudo-element for both rows and columns.
• Style them with a background color to indicate highlighting.
• Use absolute positioning and overflow to ensure the highlighting extends beyond the cell boundaries.
• Optionally, add classes to distinguish between row and column highlighting for customization.

Example Implementation

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before {
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML:

This approach provides a flexible and customizable solution for highlighting rows and columns in tables.

The above is the detailed content of How Can You Highlight Rows and Columns in Tables with CSS?. For more information, please follow other related articles on the PHP Chinese website!