I have a HTML table in my VF page with 18 columns and without the horizontal scroll, the table is looking very clumsy. Is there a way to add one?
I already tried giving the scroll:auto feature in output panel. but this does not work, the VF page automatically tries to fit the table to screensize..
VF Code:
<apex:pageblock >
<style>
#table-wrapper {
position:relative;
overflow-x: scroll;
}
#table-scroll {
overflow:auto;
}
</style>
<html>
<div id="table-wrapper">
<div id="table-scroll">
<table class="list" border="1" cellpadding="2" bgcolor="#F5FFFA" align="center">
<tr>
.
.
(Rest of the table)
.
.
</tr>
</table>
</div>
</div>
</html>
</apex:pageblock>
Attribution to: Robin
Possible Suggestion/Solution #1
Use overflow-x: scroll;
<apex:page standardController="account" extensions="accounts_conte">
<style>
#table-wrapper {
position:relative;
overflow-x: scroll;
}
#table-scroll {
height:50px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:yellow;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
</style>
<html>
<div id="table-wrapper">
<div id="table-scroll">
<table>
<thead>
<tr>
<th><span class="text">A</span></th>
<th><span class="text">B</span></th>
<th><span class="text">C</span></th>
</tr>
</thead>
<tbody>
<tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
<tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
<tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
<tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
<tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
<tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
<tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
<tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
<tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
<tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
<tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
<tr> <td>1, 11</td> <td>2, 11</td> <td>3, 11</td> </tr>
<tr> <td>1, 12</td> <td>2, 12</td> <td>3, 12</td> </tr>
<tr> <td>1, 13</td> <td>2, 13</td> <td>3, 13</td> </tr>
<tr> <td>1, 14</td> <td>2, 14</td> <td>3, 14</td> </tr>
<tr> <td>1, 15</td> <td>2, 15</td> <td>3, 15</td> </tr>
<tr> <td>1, 16</td> <td>2, 16</td> <td>3, 16</td> </tr>
<tr> <td>1, 17</td> <td>2, 17</td> <td>3, 17</td> </tr>
<tr> <td>1, 18</td> <td>2, 18</td> <td>3, 18</td> </tr>
<tr> <td>1, 19</td> <td>2, 19</td> <td>3, 19</td> </tr>
<tr> <td>1, 20</td> <td>2, 20</td> <td>3, 20</td> </tr>
</tbody>
</table>
</div>
</div>
</html>
</apex:page>
Attribution to: Rao
Possible Suggestion/Solution #2
Generally speaking, you're looking for Fixed TableRC if you want a library that does this; salesforce uses something called x-grid that accomplishes the same thing (see the "enhanced list view" feature to see what I'm talking about).
Trying to do this from scratch is a very time-consuming process. I wrote my own version in a matter of about three work days (and it's relatively slow and clunky compared to the plugin I've linked). For most projects, I normally recommend writing your own, but in this particular case, I'd strongly advise leveraging a plugin of some sort to save yourself time.
A simple CSS trick and some JS for a scrolling header simply won't work. Browsers don't support overflow on a tbody, for example, and there's no standards that literally specify a way to make this sort of table without resorting to JS manipulation (if there is, my day of research before I even went this route was useless). Even if there was a way that appeared in HTML5, it would be useless for older versions of IE anyways.
For a simple explanation, what you basically need to do is absolutely position the outer container (either the table or div), then absolutely position the header and body parts, and if you're not using a real table, you need to also resize all the cell elements. You also set the overflow parameter for the head to "hidden", and the body is set to "auto" for the scrollbars. Finally, the body needs a scroll event handler that sets the offset of the header to match its own. There's several libraries out there that accomplish this, as previously linked, although I did end up writing my own.
Attribution to: sfdcfox
Possible Suggestion/Solution #3
Try this
#table-scroll
{
overflow:auto;
width:500px;
}
<div id="table-scroll" layout="block">
<table class="list" border="1" cellpadding="2" bgcolor="#F5FFFA" align="center">
<tr>
.
.
(Rest of the table)
.
.
</tr>
</table>
</div>
Please give correct answer if it works
Attribution to: Arun SFDC
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/33632