1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Making a HTML table on a page node scrollable

Discussion in 'Styling and Customization Questions' started by Emil JaBo, Nov 11, 2014.

  1. Emil JaBo

    Emil JaBo Active Member

    Hi, I need to incorporate a very large information table into my forum.The best solution for my needs is to create a page node and then add the table HTML to the "Template HTML" box. I have also wrapped it in the "post content div". It looks perfect. Exactly how I want it to look except.... Because it is quite a wide table, I was wondering if it can be made to scroll horizontally instead of having to drag out the width of the browser window? Also it will become an issue if a member does not have a large monitor and they cannot drag the browser window wide enough to fit the width of the table on...

    Thanks. :)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Emil JaBo

    Emil JaBo Active Member

    Brogan, Thank you. I researched what div you suggested and it looks to be ideal for what I want. I found the following code on the net:

    HTML:
    <body>
        <div class="auto">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
    </body>
    I am barely just starting to learn manually coding things and inserted the above into my html page where I presumed it needed to go but sadly it went wrong. Presumably because I placed it in the wrong place...

    Below is my html code for the table on my page node as it stands:
    HTML:
    <div class="messageText ugc baseHtml">
    
    <table border="1"><tr>
    <th>Registration (green field means confirmed by photo)</th>
    <th>Manufacturer and/or Designer</th>     
    <th>Type</th>
    <th>Version</th>
    <th>Serial No. (green field means confirmed by photo)</th>
    <th>Serial No. (Probably)</th>
    <th>Notes</th>
    <th>Units & Users</th>
    <th>Name/Nickname</th>
    <th>Source</th>
    <th>Date of Notice</th>
    <th>Date of Notice</th>
    <th>Double-Reg-Sktz-WNr.</th>
    <th>New Edit</th>
    <th>Label</th>
    <th>Country</th></tr>
    
    <td>AA+..</td><td>Klemm</td><td>KL35</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>stkz-Ax+xx</td><td>Germany</td></tr></table>
    
    </div>
    Where exactly would I have to place that additional "div with overflow auto" code to make the table scrollable? :)
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You need to wrap the table HTML code in the div.

    Code:
    <div style="width: auto; height: auto; overflow: auto">
    Your table code here...
    </div>
    
     
    Andy.N likes this.
  5. Emil JaBo

    Emil JaBo Active Member

    Brogan, that is perfect, except is it possible to have the following div in there too:
    <div class="messageText ugc baseHtml">
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

  7. Emil JaBo

    Emil JaBo Active Member

    Brogan, thank you, works like a charm. :)
     

Share This Page