I have HTML table want to fix heigh and add scroll bar to table

Question

0.00/5 (No votes)

See more:

I have html table creating dynamically using java script now I Want to fix heigh of table and add scroll bar to table if no of records are too many

What I have tried:

<!DOCTYPE html>
<html>
<head>
<style>

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid silver;
}

tr:nth-child(even) {
    background-color: #C0C0C0;
}
tr:nth-child(odd) {
    background-color: #808080;
} 

table {
  height: 500px;
  overflow-y: scroll;
}


</style>
</head>
<body onload="myFunction()">
//<body onload="myFunction(); alternate();">
<div>
  

<div style="overflow:scroll;height:500px;width:100%;overflow:auto">

<table id=tableData>
</table>
</div>
</div>
<p id="demo"></p>
<script>	
		
	function myFunction()
	{
		var n = prompt("", "");
		n = parseInt(n);
		var table;			
		document.getElementById("demo").innerHTML = n;			
		if (n > 0)
		{
        			
			table=document.createElement("TABLE");		
			
			for(i=0;i<n;i++)
			{
				if(i==0)
				{
<pre>var header = table.createTHead();
					// Create an empty <tr> element and add it to the first position of <thead>:
					var row = header.insertRow(0);     	
					// Insert a new cell (<td>) at the first position of the "new" <tr> element:
					var cell = row.insertCell(0);
					// Add some bold text in the new cell:
					cell.innerHTML = "Id"; 

					var cell = row.insertCell(1);
					// Add some bold text in the new cell:
					cell.innerHTML = "First Name"; 

					var cell = row.insertCell(2);
					// Add some bold text in the new cell:
					cell.innerHTML = "Last Name"; 

					var cell = row.insertCell(3);
					// Add some bold text in the new cell:
					cell.innerHTML = "Mobile No"; 

					var cell = row.insertCell(4);
					// Add some bold text in the new cell:
					cell.innerHTML = "Email Id"; 	
				
				// var th = document.createElement('th'); //column
   				// var text = document.createTextNode(0); //cell
   				// th.appendChild(Id);
   				// tr.appendChild(th);			

				//var row = table.insertRow(-1);
				//var x = row.insertCell(0);
				//x.innerHTML = 'Id'; 
				//x.style.width = '50px';
				
				//var x = row.insertCell(1);
				//x.innerHTML = 'First Name';
				//x.style.width = '100px';



var FN=document.createElement('input');
				FN.type='hidden';
				FN.id='FN'+i; 
				FN.value='First Name'+i; 
				x.Appendchild(FN);
				

				//var x = row.insertCell(2);
				//x.innerHTML = 'Last Name'; 
				//x.style.width = '100px';				
				
				//var x = row.insertCell(3);
				//x.innerHTML = 'Mobile No'
				//x.style.width = '100px';

				//var x = row.insertCell(4);
				//x.innerHTML = 'Email Id';
				//x.style.width = '100px';
				}
				else
				{

rowID++;
				
				var row = document.createElement('tr');
				row.id = i;
			        row = table.insertRow(-1);
				
				//row.setAttribute("onclick", "RowClick(this)");
	
				row.setAttribute("onclick", "RowClick(i)");	


				var x = row.insertCell(0);
				x.innerHTML = '100'+i; 
				x.style.width = '50px';	
				var row = table.insertRow(-1);
				var x = row.insertCell(0);
				x.innerHTML = '100'+i; 
				x.style.width = '50px';
				
				var x = row.insertCell(1);
				x.innerHTML = 'First Name'+i;
				x.style.width = '100px';
				

				var x = row.insertCell(2);
				x.innerHTML = 'Last Name'+i; 
				x.style.width = '100px';				
				
				var x = row.insertCell(3);
				x.innerHTML = '998855442'+i
				x.style.width = '100px';

				var x = row.insertCell(4);
				x.innerHTML = 'Email'+i;
				x.style.width = '100px';				
            			}
				//alert('hi');	
								
			}
			
		}
		var dvTable = document.getElementById("tableData");
    		dvTable.innerHTML = "";
    		dvTable.appendChild(table);		
	}

	

</script>
</body>
</html>

function RowClick(i)
		{
			
			// var s = document.getElementById(i).value;
			 //document.getElementById("demo1").innerHTML = "The value of z is: " + s;
			//	alert('hi');
			

			var FN=document.getElementById('FN'+i;).value
			//var FN=document.getElementById('LN'+i).value;
			var FN=document.getElementById('Last Name'+i;).value;
			var FN=document.getElementById('MNo'+i).value;
			var FN=document.getElementById('Email'+i).value;
    			
                    

	}

table size is fixed but it is not showing scroll bar

Posted 6-Apr-18 1:36am

paul_vin

Updated 9-Apr-18 9:30am

v5

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2018-04-09T09:32:00

Solution 1

By default HTML table does not support such sophisticated mode as in-table-body scroll...
You can use CSS to change default tbody behavior and get the results...
See this sample: HTML table with vertical scroll inside tbody - JSFiddle[^]

Posted 9-Apr-18 9:32am

Kornfeld Eliyahu Peter