XF 1.3 Making a HTML table on a page node scrollable

Emil JaBo · Nov 11, 2014

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.

Paul B · Nov 11, 2014

Wrap it in a div with overflow auto.

See here for an example: http://cliptheapex.com/pages/2012-fantasy-f1-australia/

Emil JaBo · Nov 12, 2014

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?

Paul B · Nov 12, 2014

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>

Emil JaBo · Nov 12, 2014

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

Paul B · Nov 12, 2014

Emil JaBo · Nov 12, 2014

Brogan, thank you, works like a charm.

XF 1.3 Making a HTML table on a page node scrollable

Emil JaBo

Active member

Paul B

XenForo moderator

Emil JaBo

Active member

Paul B

XenForo moderator

Emil JaBo

Active member

Paul B

XenForo moderator

Emil JaBo

Active member

Similar threads

We value your privacy