Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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>
share|improve this question

3 Answers 3

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.

share|improve this answer

Use overflow-x: scroll;

enter image description here

<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>
share|improve this answer
    
Thanks Rao. I tried the code but it did not work. I have updated the question with my version of code. Can you tell me where am I going wrong? Please note that I want to have a horizontal scroll and not a vertical scroll. Thanks –  Robin Apr 24 at 23:39

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.