Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #168286

    When using a data table and viewing in mobile mode, the first table column heading is lost. I have 3 columns but it is only showing 2.

    #168412

    Hello xyzb!

    Can you post the link to page where you have table?

    Best regards,
    Yigit

    #168530
    This reply has been marked as private.
    #168733

    Hey!

    Please add following code to Quick CSS in Enfold theme options

    @media only screen and (max-width: 767px) { .responsive .avia-data-table td:before { display: none; } }
    .responsive .avia-data-table tr:first-child th { display: block; }

    Cheers!
    Yigit

    #168969
    This reply has been marked as private.
    #169415

    Hello!

    You can remove the responsive styling of the table on mobile view. You might need to adjust it a little. Edit css > shortcodes.css, find then remove this code:

    @media only screen and (max-width: 767px)
    {
    	.responsive div .avia-data-table table,
    	.responsive div .avia-data-table tbody,
    	.responsive div .avia-data-table tr,
    	.responsive div .avia-data-table td,
    	.responsive div .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;}
    	.responsive .avia-data-table{border-style:solid; border-width: 1px;}
    	.responsive .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;}
    	.responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th{display:none;}
    	.responsive .avia-data-table td:before {
    	display:block;
    	font-style: italic; font-size: 11px;
    	}
    
    	.responsive .avia-data-table td {
    		position: relative;
    	}
    }

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Data Tables’ is closed to new replies.