How to remove fixed column horizontal scroll bar

var rowCount = $('#fixedTable tr').length;
   var heightDy=$('#fixedTable ').height()-300;
   if(rowCount>1){
    var cTable =$('#fixedTable ').dataTable( {
        "scrollY"        : "94%",     
        "scrollX"        : "90%",
        "scrollCollapse" : true,
        "bFilter"        : false, 
        "bInfo"          : false,
        "bJQueryUI"      : false,
        "bAutoWidth"     : false,
        "paging"         : false
        
    } );
    
     new $.fn.dataTable.FixedColumns( cTable, { heightMatch: 'none' }  );
    
   
  }   

Open in new window


while my table display is giving 2 scroll bar . 1)How to remove fixed column horizontal scroll bar

2)both the scroll bar not in alignment ? how to do the alignment ?
LVL 20
Sathish David  Kumar NArchitectAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
okay - first of all the thead area is invalid - should more look like this:
<thead>
	<tr><th>1</th></tr>
	<tr><th>2</th></tr>
	<tr><th>3</th></tr>
	<tr><th>4</th></tr>
</thead>

Open in new window

Second - do you really want to have four header rows?
Third - your script references the wrong table id - should be '#fixedTableId' instead of '#fixedTable'.
And you will get also the tr`s of the thead rows - you should also select only the tbody rows:
var rowCount = $('#fixedTableId tbody tr').length;
var heightDy=$('#fixedTableId').height()-300;
if(rowCount>1){
	var cTable =$('#fixedTableId').dataTable( {
		"scrollY"        : "94%",     
		"scrollX"        : "90%",
		"scrollCollapse" : true,
		"bFilter"        : false, 
		"bInfo"          : false,
		"bJQueryUI"      : false,
		"bAutoWidth"     : false,
		"paging"         : false
	} );
	new $.fn.dataTable.FixedColumns( cTable, { heightMatch: 'none' } );
}   

Open in new window


But why do you want to use the fixed column when you just have one column?

Thanks.
Rainer
0
 
Rainer JeschorCommented:
Hi,
could you perhaps share a little bit more of your HTML/CSS/Javascript source?
How does the table look alike (column wise, content wise)?
Thanks.
Rainer
0
 
Sathish David Kumar NArchitectAuthor Commented:
Actually I am using data table .

My Html  table should be

<div name='fixedDiv' id='fixedDiv' > 
   <table name='fixedTableId' id='fixedTableId'  border=1  width='100%'  bgColor='#C0C0C0'> 
       <thead>
              <tr>1</tr>
                 <tr>2</tr>
                 <tr>3</tr>
                   <tr>4</tr>
  </thead>
   <tbody>
         <tr> <td> aa </td></tr>
            <tr> <td> bb</td></tr>
           <tr> <td> cc</td></tr>
           <tr> <td> dd</td></tr>
</tbody>
</table>
</div>

Open in new window

0
 
Sathish David Kumar NArchitectAuthor Commented:
HI Rainer ,

Thanks,

>>>>>okay - first of all the thead area is invalid - should more look like this:
Actually its sample data only . I missed <th> its there in my original

>>>>>Second - do you really want to have four header rows?
only one row other are <th>

<thead>
	<tr>
        <th>1</th>
	<th>2</th>
	<th>3</th>
	<th>4</th>
      </tr>
</thead>

Open in new window



>>>>>>>hird - your script references the wrong table id - should be '#fixedTableId' instead of '#fixedTable'.
How can you say ?
in my HTML table id is #fixedTableId  i didnt use #fixedTable any where ??
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.