Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 8, 2025 at 3:31 pm #1492256
    invulon

    Hello again!

    I searched little bit and tried some existing quick css options to add the featur i am looking for but it seems to break the code so I keep reverting to original CSS to avoid issue with container sizes

    Here is my table on the page
    Table

    1- I am trying to make Heading row display vertical, like the picture below

    2 – I am also trying to make the column highlight with a color on mouseover hover.
    I dont know if these things are possible with quick CSS so i wanted to check in with expert opinion.

    Could you tell me if these are doable or am I expecting too much from the table :)

    • This topic was modified 2 days, 13 hours ago by invulon.
    December 9, 2025 at 7:24 am #1492276
    Ismael

    Hey invulon,

    Thank you for the inquiry.

    This is possible with a custom script and a few styling changes. Please add the following code to your functions.php file:

    add_action('wp_footer', function() {
?>
<script>
jQuery(function($){

    $('.avia-heading-row th').each(function(){
        var text = $(this).text();
        $(this).html('<span class="av-
rotated-text">' + text + '</span>');
    });

});
</script>
<?php

    Then add this css code to rotate the text inside the heading row.

    #top .avia-table th {
    height: 200px;
}

#top .avia-table th .av-rotated-text {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: left bottom;
    white-space: nowrap;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.