Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #193556

    Hi, I have a table with two columns each column has a header row. All looks fine on regular monitor but on mobile phone the first row header is missing and the second column header appears instead.
    first column header is “SIZE” second column header is “MATERIALS”.

    For mobile device how do I get the first Column header “SIZE” to appear above first column and move the second column header “MATERIALS” to be above second column?

    I prefer to display both column headers but it would be okay to display Just the first column header “SIZE” where MATERIALS appears now.

    Otherwise my last choice is to hide the second column header on mobile phone. What is the css to hide the second column header from displaying on mobile?


    Thank you


    Hey edebe!

    We can’t seem to fix this issue yet. We suggest to disable the responsive css coding for table on mobile view. Edit css > shortcodes.css find this code on 1203:

    @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 {
    	font-style: italic; font-size: 11px;
    	.responsive .avia-data-table td {
    		position: relative;

    We might need to adjust the width of the table after.

    Best regards,


    Great, thank you disabling the responsive css code for table on mobile view worked for my purposes.



    Glad it worked. I just thought that we should adjust the width. :)

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘table header’ is closed to new replies.