How to hide a table column below a certain width?

0ptima

0ptima

Well-known member
I would like to hide certain columns in a table that my addon uses when the browser width is below X pixels but dont how to do it. Can I use template conditions or is there a better way? Thanks.

Here is my template.


Code: 
<div class="dataTableWrapper">
    <table class="dataTable">
        <col style="width: 1%" />
        <thead>
            <tr class="dataRow">
                <th></th>
                <th>{xen:phrase timeslips_member}</th>
                <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                <th>{xen:phrase timeslips_induction}</th>
                <th>{xen:phrase timeslips_WHP}</th>
                <th>{xen:phrase timeslips_torque}</th>
                <th>{xen:phrase timeslips_dyno}</th>
            </tr>
        </thead>

<xen:foreach loop="$dynos" value="$dyno">
        <tr class="dataRow">
            <td>#</td>
            <td ><xen:username user="$dyno" /></td>
            <td class="tshide" ><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
            <td>{$dyno.ts_induction}</td>
            <td>{$dyno.ts_WHP}</td>
            <td>{$dyno.ts_torque}</td>
            <td> {$dyno.ts_dyno}</td>
            </tr>

        </xen:foreach>

        </tbody>
    </table>
</div>
 
0ptima said:
I would like to hide certain columns in a table that my addon uses when the browser width is below X pixels but dont how to do it. Can I use template conditions or is there a better way? Thanks.

Here is my template.


Code: 
<div class="dataTableWrapper">
    <table class="dataTable">
        <col style="width: 1%" />
        <thead>
            <tr class="dataRow">
                <th></th>
                <th>{xen:phrase timeslips_member}</th>
                <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                <th>{xen:phrase timeslips_induction}</th>
                <th>{xen:phrase timeslips_WHP}</th>
                <th>{xen:phrase timeslips_torque}</th>
                <th>{xen:phrase timeslips_dyno}</th>
            </tr>
        </thead>

<xen:foreach loop="$dynos" value="$dyno">
        <tr class="dataRow">
            <td>#</td>
            <td ><xen:username user="$dyno" /></td>
            <td class="tshide" ><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
            <td>{$dyno.ts_induction}</td>
            <td>{$dyno.ts_WHP}</td>
            <td>{$dyno.ts_torque}</td>
            <td> {$dyno.ts_dyno}</td>
            </tr>

        </xen:foreach>

        </tbody>
    </table>
</div>
Click to expand...


The only way I'm aware of is CSS media method, if you have a class assigned to that table then use this:
Code: 
@media (max-width: 480px) {
    .yourClass {
        display: none;
    }
}

Change 480px to your max-width, or you can use xenforo preset responsive width by using the style properties variables like this:
Code: 
@media (max-width: @maxResponsiveMediumWidth) {
    .yourClass {
        display: none;
    }
}

You might have noticed already the property name @maxResponsiveMediumWidth this means the medium width setup in the style properties you can change it from Appearance > Style Properties > Responsive Design.
 
Thansk @Cyb3r . Im using the XF table code, so it already has class names. Would I have to add a class name on the <th> and <td> of the column I want to hide? In this case I want to hide the "torque" column

So would I do something like <th class="hideTorque"> and <td class="hideTorque">

and then add the following CSS?

Code: 
@media (max-width: @maxResponsiveMediumWidth) {
    .hideTorque {
        display: none;
    }
}


upload_2015-10-9_9-4-9.webp
 
Thanks guys! Got it to work!

Here is my template
Code: 
<div class="dataTableWrapper">
    <table class="dataTable">
        <col style="width: 1%" />
        <thead>
            <tr class="dataRow">
                <th class="tsHide"></th>
                <th>{xen:phrase timeslips_member}</th>
                <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                <th>{xen:phrase timeslips_induction}</th>
                <th>{xen:phrase timeslips_WHP}</th>
                <th>{xen:phrase timeslips_torque}</th>
                <th class="tsHide">{xen:phrase timeslips_dyno}</th>
            </tr>
        </thead>

<xen:foreach loop="$dynos" value="$dyno">
        <tr class="dataRow">
            <td class="tsHide" >#</td>
            <td ><xen:username user="$dyno" /></td>
            <td><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
            <td>{$dyno.ts_induction}</td>
            <td>{$dyno.ts_WHP}</td>
            <td>{$dyno.ts_torque}</td>
            <td class="tsHide"> {$dyno.ts_dyno}</td>
            </tr>

        </xen:foreach>

        </tbody>
    </table>
</div>

In EXTRA.css I added the following

Code: 
@media (max-width: @maxResponsiveMediumWidth) {
   .dataTable tr.dataRow td.tsHide{
        display: none;
    }
}

@media (max-width: @maxResponsiveMediumWidth) {
   .dataTable tr.dataRow th.tsHide{
    display: none;
    }
}
 
0ptima said:
Thanks guys! Got it to work!

Here is my template
Code: 
<div class="dataTableWrapper">
    <table class="dataTable">
        <col style="width: 1%" />
        <thead>
            <tr class="dataRow">
                <th class="tsHide"></th>
                <th>{xen:phrase timeslips_member}</th>
                <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                <th>{xen:phrase timeslips_induction}</th>
                <th>{xen:phrase timeslips_WHP}</th>
                <th>{xen:phrase timeslips_torque}</th>
                <th class="tsHide">{xen:phrase timeslips_dyno}</th>
            </tr>
        </thead>

<xen:foreach loop="$dynos" value="$dyno">
        <tr class="dataRow">
            <td class="tsHide" >#</td>
            <td ><xen:username user="$dyno" /></td>
            <td><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
            <td>{$dyno.ts_induction}</td>
            <td>{$dyno.ts_WHP}</td>
            <td>{$dyno.ts_torque}</td>
            <td class="tsHide"> {$dyno.ts_dyno}</td>
            </tr>

        </xen:foreach>

        </tbody>
    </table>
</div>

In EXTRA.css I added the following

Code: 
@media (max-width: @maxResponsiveMediumWidth) {
   .dataTable tr.dataRow td.tsHide{
        display: none;
    }
}

@media (max-width: @maxResponsiveMediumWidth) {
   .dataTable tr.dataRow th.tsHide{
    display: none;
    }
}
Click to expand...

You can add them both in one @media block, no need to create block for every class, and better you can apply the same CSS to all wanted classes by adding them together separated by comma:

Code: 
@media (max-width: @maxResponsiveMediumWidth) {
   .dataTable tr.dataRow td.tsHide,
   .dataTable tr.dataRow th.tsHide
   {
        display: none;
   }
}
 
I have my template setup to show 4 columns when the width is less than @maxResponsiveNarrowWidth

CSS
Code: 
<xen:if is="@enableResponsive">
@media (max-width: @maxResponsiveNarrowWidth) {
   .dataTable tr.dataRow th.tsHide,
    .dataTable tr.dataRow td.tsHide
    {
    display: none;
    }
}   
</xen:if>

Template
Code: 
<div class="dataTableWrapper">
<table class="dataTable">
        <col style="width: 1%" />
        <thead>
            <tr class="dataRow">
                <th class="tsHide"></th>
                <th class="tsHide">{xen:phrase timeslips_member}</th>
                <th >{xen:phrase timeslips_vehicle}</th>
                <th>{xen:phrase timeslips_induction}</th>
                <th>{xen:phrase timeslips_WHP}</th>
                <th>{xen:phrase timeslips_torque}</a></th>
                <th class="tsHide">{xen:phrase timeslips_dyno}</th>
            </tr>
        </thead>
        <tbody>
<xen:foreach loop="$dynos" value="$dyno">
        <tr class="dataRow">
            <td class="tsHide"><img src="{xen:helper avatar, $user, s}" alt="" class="listAvatar" /></td>
            <td class="tsHide"><xen:username user="$dyno" /></td>
            <td><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
            <td>{$dyno.ts_induction}</td>
            <td>{$dyno.ts_WHP}</td>
            <td>{$dyno.ts_torque}</td>
            <td class="tsHide">{$dyno.ts_dyno}</td>
            </tr>

        </xen:foreach>

        </tbody>
    </table>
</div>

How can I show a 5th column when the width is between @maxResponsiveNarrowWidth and @maxResponsiveMediumWidth ?
 
You must log in or register to reply here.

Similar threads

TheBigK
Styling Table In AdminCP
Replies
3
Views
809
TheBigK
TheBigK
TheJoshy
  • Question Question
xFShout - How to style sticky message using CSS?
Replies
8
Views
2K
TheJoshy
TheJoshy
Top Bottom