• 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

#1
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. :)
 
#3
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? :)
 

Brogan

XenForo moderator
Staff member
#4
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>