Post HTML5, Javascript & CSS3 queries here

lywyre · Mar 14, 2016

I have created one HTML table with fixed header and scrollable body. But when I resize the browser window or zoom in or zoom out the browser the table alignment changes. I want to view the complete table aligned with data even if browser window is resized or zoomed in or zoomed out.

And I need it to work in IE 11 and IE 8

I have tried many solutions from google, but I couldn't make it work.

Kindly help, I need the solution for this issue badly.

Here is the code:

Code:

<html>
<head>
 <style>
   div td{
	text-align: center;
	}
 </style>
	<script language="Javascript">
	window.onload = init;
	window.onresize = init;
	
	function init() {
	var eTable = document.getElementById("headers");
	 if (eTable != null){

	eTable.style.width = document.getElementById('data').offsetWidth;
	document.getElementById('th1').style.width = document.getElementById('td1').offsetWidth;
	document.getElementById('th2').style.width = document.getElementById('td2').offsetWidth;
	document.getElementById('th3').style.width = document.getElementById('td3').offsetWidth;
	document.getElementById('th4').style.width = document.getElementById('td4').offsetWidth;
	document.getElementById('th5').style.width = document.getElementById('td5').offsetWidth;
	
	document.getElementById('th7').style.width = document.getElementById('td7').offsetWidth;
	document.getElementById('th8').style.width = document.getElementById('td8').offsetWidth;
	document.getElementById('th6').style.width = document.getElementById('td6').offsetWidth;
	document.getElementById('th9').style.width = document.getElementById('td9').offsetWidth;
	}
  }
</script>

</head>
	<body>	



	<table id="headers" width="100%"  >
			<thead><tr bgcolor="blue">
				<th align="center" id="th1">
				DPCI<br>
			</th>						 
			<th align="center" id="th2">
				Description<br>
			</th>
			<th align="center" id="th3">
				Estimated Delivery Date<br>
			</th>
			<th align="center" id="th4">
				Promotional Week Begin Date or Event Set Date<br>
			</th>			
			<th align="center" id="th5">
				Promotional Type<br>
			</th>			
			<th align="center" id="th6">
				Regular Price<br>
			</th>			
			<th align="center" id="th7">
				Reduced Price<br>
			</th>			
			<th align="center" id="th8">
				Sales Forecast Qty (Cases)<br>
			</th>
			<th align="center" id="th9">
				HQ Push Qty (Cases)<br>
			</th>
			</tr></thead>
	</table>
			<div style="height: 275px; overflow-y: auto;">

			<table id="data" width="100%">
			      
			
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	

				</table>
			</div>
	</body>
</html>

//Mod Edit - Wrapped the code within CODE tags

I remember I did not get a proper solution for this (about 2 years ago). The closes I got was similar to what you have achieved, with out the ability for the table to adjust width dynamically. Did a quick search with no luck. Do let know when you find a solution.

ariftwister · Apr 20, 2016

window.onresize = init;

I think this is the code responsible for your mis alignment ?? and i tried this code snipet and it didn't change when i resized

shar_yogi · May 13, 2016

Hi
I have created some drop-down menus in navbar using bootstrap. And i m facing a problem, which is whenever my home page is loaded it opens all the drop down menu. I want them all to be in closed state until user clicks on them.
Here is my code : Edit fiddle - JSFiddl

Shah · May 13, 2016

shar_yogi said:
Hi
I have created some drop-down menus in navbar using bootstrap. And i m facing a problem, which is whenever my home page is loaded it opens all the drop down menu. I want them all to be in closed state until user clicks on them.
Here is my code : Edit fiddle - JSFiddl

In all your menu items, remove that "open" class. i.e. Replace <li class="dropdown open"> with <li class="dropdown">

shar_yogi · May 13, 2016

Thanks [MENTION=129731]Shah[/MENTION] it worked.

quicky008 · Jun 7, 2019

This thread seems dead for the most part but i have a query concerning a web page that i am trying to create,hence posting it here:

I'd like to develop a web-page using php and html having 2 columns side by side,the column on the left being narrower than the one on the right.The left column will contain some links,and on clicking them,the respective content will be displayed on the 2nd column to the right(it will not redirect to some other page,but will display it on the same page only on the 2nd column).

For instance what i am trying to do here is keep two links,one to view the contents of a mysql table and the other to insert new values to the table.On clicking the links,their corresponding options will be displayed on the right column,not on an entirely new page-is there any way to implement that?

I dont have much experience with web-development(basically a noob),so if someone could help me with this one then i will be extremely grateful.

thetechfreak · Jul 4, 2019

@quicky008 This might do the trick for you: Pass value to iframe from a window

quicky008 · Jul 4, 2019

tbh i dont know much about iframes-could you please post the link to a tutorial which might offer some explanation on how it should be used?

clmlbx · Mar 27, 2021

quicky008 said:
This thread seems dead for the most part but i have a query concerning a web page that i am trying to create,hence posting it here:

I'd like to develop a web-page using php and html having 2 columns side by side,the column on the left being narrower than the one on the right.The left column will contain some links,and on clicking them,the respective content will be displayed on the 2nd column to the right(it will not redirect to some other page,but will display it on the same page only on the 2nd column).

For instance what i am trying to do here is keep two links,one to view the contents of a mysql table and the other to insert new values to the table.On clicking the links,their corresponding options will be displayed on the right column,not on an entirely new page-is there any way to implement that?

I dont have much experience with web-development(basically a noob),so if someone could help me with this one then i will be extremely grateful.

what kind of front-end are you using? any js librries? then it can be easy, but as you said you are just starting into web development so I assume answer will be no.

you can use javascript to do either hide and show the content if it is not much (save all pages content on same page) else you can do ajax call and replace right column html

Don't use iframes

TheSloth · Mar 28, 2021

One can use iFrames iff the iframe contents are not needed to be accessed from it. Say for example, on the payment page of a website, customer has to enter some details like OTP only after that the payment module has to appear. Some payment vendors might provide their own JS library, which contains code to load these modules, to the website owner. Once customer enters the correct OTP, one can make a call to these payment related scripts in the iframe where customer can enter the card details and proceed to bank page to authorize the payment. Here website owner don't have to save customer's card details at all but only few transaction related details which you will get from the payment partner.

One can access iframe contents, but its get complex, and that should be avoided when easy alternatives are available like posted above. Use ajax calls to get the data from your API and populate in a div.

Somehow I missed this thread entirely until now.

Post HTML5, Javascript & CSS3 queries here

lywyre

Cyborg Agent

ariftwister

Truth Seeker

shar_yogi

Broken In

Shah

Cyborg Agent

shar_yogi

Broken In

quicky008

Technomancer

thetechfreak

Legend Never Ends

quicky008

Technomancer

clmlbx

Technomancer

TheSloth

The Slowest One