XF 1.3 Making a HTML table on a page node scrollable

E

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. :)
 
Sort by date Sort by votes
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? :)
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

S
  • Solved
How do I recover a node type of page
Replies
2
Views
181
stromb0li
S
Scandal
XF 2.2 Load a xF2 page on <iframe> without blocking / render my own template
Replies
6
Views
298
Scandal
Scandal
Fullmental
  • Question Question
XF 2.2 Not receiving alerts on a single watched node
Replies
2
Views
606
Fullmental
Fullmental
Miri
  • Solved
XF 2.2 How to make usernames dynamic in a static HTML page?
Replies
2
Views
520
Paul B
Paul B
Kevin
  • Solved
XF 2.2 Change a 'Page' node to not be under 'Forums' in the breadcrumb?
Replies
10
Views
472
Kevin
Kevin
Top Bottom