Advertisement

10.03.2008 at 07:47AM PDT, ID: 23785154 | Points: 500
[x]
Attachment Details

how do i center this table on the page?

Asked by markmchugh in Cascading Style Sheets (CSS)

Tags:

Hi, code attached, i want to center this table on the page, can somebody show me how?Start Free Trial
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:
515:
516:
517:
518:
519:
520:
521:
522:
523:
524:
525:
526:
527:
528:
529:
530:
531:
532:
533:
534:
535:
536:
537:
538:
539:
540:
541:
542:
543:
544:
545:
546:
547:
548:
549:
550:
551:
552:
553:
554:
555:
556:
557:
558:
559:
560:
561:
562:
563:
564:
565:
566:
567:
568:
569:
570:
571:
572:
573:
574:
575:
576:
577:
578:
579:
580:
581:
582:
583:
584:
585:
586:
587:
588:
589:
590:
591:
592:
593:
594:
595:
596:
597:
598:
599:
600:
601:
602:
603:
604:
605:
606:
607:
608:
609:
610:
611:
612:
613:
614:
615:
616:
617:
618:
619:
620:
621:
622:
623:
624:
625:
626:
627:
628:
629:
630:
631:
632:
633:
634:
635:
636:
637:
638:
639:
640:
641:
642:
643:
644:
645:
646:
647:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Sortable table with fixed header</title>
	<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="Sortable table,DHTML table,table with fixed header,fixed heading,Javascript table">
<meta name="Description" content="A library of DHTML and Ajax scripts">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
 
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">
 
		
	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
 
	}
	p{
		margin-bottom:0px;
		font-weight:bold;
	}
	.ad{
		margin-top:30px;
	}
	
	/* Start layout CSS */
	.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{	/* General rules for both standard column header and mouse on header of sortable columns */
		cursor:pointer;	
		border-bottom:3px solid #C5C2B2;
		border-right:1px solid #ACA899;
		border-left:1px solid #FFF;	
		background-color: #ECE9D8;
	}
	
	.tableWidget_headerCell{	/* Standard column header */
		border-top:2px solid #ECE9D8;
		
	}
	
	.tableWigdet_headerCellOver{	/* Rollover on sortable column header */
		border-top:2px solid #FFC83C;		
	}
	.tableWidget tbody .tableWidget_dataRollOver{	/* Rollover style on mouse over (Data) */
		background-color:#FFF;	/* No mouseover color in this example - specify another color if you want this */
	}
	
	.tableWigdet_headerCellDown{
		border-top:2px solid #FFC83C;	
		background-color:#DBD8C5;
		border-left:1px solid #ACA899;
		border-right:1px solid #FFF;			
	}
	.tableWidget td{
		margin:0px;
		padding:2px;
		border-bottom:1px solid #EAE9E1;	/* Border bottom of table data cells */
		
	}
	.tableWidget tbody{
		background-color:#FFF;
	}
	.tableWidget{
		font-family:arial;
		font-size:12px;	
		width:400px;
	}
		
	/* End layout CSS */
	
	
	div.widget_tableDiv {
		border:1px solid #ACA899;	/* Border around entire widget */
		height: 200px;
		overflow:auto;
		overflow-y:auto;
		overflow:-moz-scrollbars-vertical;
		width:400px;
 
	}
	
	html>body div.widget_tableDiv {
		overflow: hidden;
		width:400px;
	}
 
	.tableWidget thead{
		position:relative;
	}
	.tableWidget thead tr{
		position:relative;
		top:0px;
		bottom:0px;
	}
 
 
 
	.tableWidget .scrollingContent{
		overflow-y:auto;
		overflow:-moz-scrollbars-vertical;
		width:100%;
 
	}
	</style>
	
	<script type="text/javascript">
	/*
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	*/	
	var tableWidget_tableCounter = 0;
	var tableWidget_arraySort = new Array();
	var tableWidget_okToSort = true;
	var activeColumn = new Array();
	var arrowImagePath = "images/";	// Path to arrow images
	function addEndCol(obj)
	{
		if(document.all)return;
		var rows = obj.getElementsByTagName('TR');
		for(var no=0;no<rows.length;no++){
			var cell = rows[no].insertCell(-1);
			cell.innerHTML = '&nbsp;';
			cell.style.width = '13px';
			cell.width = '13';
 
		}	
		
	}
	
	function highlightTableHeader()
	{
		this.className='tableWigdet_headerCellOver';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode.parentNode;
			this.parentNode.style.top = divObj.scrollTop + 'px';
 
		}
			
	}
	
	function deHighlightTableHeader()
	{
		this.className='tableWidget_headerCell';		
	}
	
	function mousedownTableHeader()
	{
		this.className='tableWigdet_headerCellDown';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode.parentNode;
			this.parentNode.style.top = divObj.scrollTop + 'px';
		}		
	}
	
	function sortNumeric(a,b){
		
		a = a.replace(/,/,'.');
		b = b.replace(/,/,'.');
		a = a.replace(/[^\d\-\.\/]/g,'');
		b = b.replace(/[^\d\-\.\/]/g,'');
		if(a.indexOf('/')>=0)a = eval(a);
		if(b.indexOf('/')>=0)b = eval(b);
		return a/1 - b/1;
	}
	
 
	function sortString(a, b) {
 
	  if ( a.toUpperCase() < b.toUpperCase() ) return -1;
	  if ( a.toUpperCase() > b.toUpperCase() ) return 1;
	  return 0;
	}	
	function cancelTableWidgetEvent()
	{
		return false;
	}
	
	function sortTable()
	{
		if(!tableWidget_okToSort)return;
		tableWidget_okToSort = false;
		/* Getting index of current column */
		var obj = this;
		var indexThis = 0;
		while(obj.previousSibling){
			obj = obj.previousSibling;
			if(obj.tagName=='TD')indexThis++;		
		}
		var images = this.getElementsByTagName('IMG');
		
		if(this.getAttribute('direction') || this.direction){
			direction = this.getAttribute('direction');
			if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
			if(direction=='ascending'){
				direction = 'descending';
				this.setAttribute('direction','descending');
				this.direction = 'descending';	
			}else{
				direction = 'ascending';
				this.setAttribute('direction','ascending');		
				this.direction = 'ascending';		
			}
		}else{
			direction = 'ascending';
			this.setAttribute('direction','ascending');
			this.direction = 'ascending';
		}
		
		
		
		if(direction=='descending'){
			images[0].style.display='inline';
			images[0].style.visibility='visible';
			images[1].style.display='none';
		}else{
			images[1].style.display='inline';
			images[1].style.visibility='visible';
			images[0].style.display='none';		
		}
 
		
		var tableObj = this.parentNode.parentNode.parentNode;
		var tBody = tableObj.getElementsByTagName('TBODY')[0];
		
		var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
		var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
		if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
			var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
			images[0].style.display='none';
			images[1].style.display='inline';
			images[1].style.visibility = 'hidden';
			if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');			
		}
 
		activeColumn[widgetIndex] = this;
		
		var cellArray = new Array();
		var cellObjArray = new Array();
		for(var no=1;no<tableObj.rows.length;no++){
			var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
			cellArray.push(content);
			cellObjArray.push(tableObj.rows[no].cells[indexThis]);
		}
		
		if(sortMethod=='N'){
			cellArray = cellArray.sort(sortNumeric);
		}else{
			cellArray = cellArray.sort(sortString);
		}
		
		if(direction=='descending'){
			for(var no=cellArray.length;no>=0;no--){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');	
						tBody.appendChild(cellObjArray[no2].parentNode);				
					}				
				}			
			}
		}else{
			for(var no=0;no<cellArray.length;no++){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');	
						tBody.appendChild(cellObjArray[no2].parentNode);				
					}				
				}			
			}				
		}
		
		for(var no2=0;no2<cellObjArray.length;no2++){
			cellObjArray[no2].removeAttribute('allreadySorted');		
		}
 
		tableWidget_okToSort = true;
		
		
	}
	
	function initTableWidget(objId,width,height,sortArray)
	{
		width = width + '';
		height = height + '';
		var obj = document.getElementById(objId);
		obj.parentNode.className='widget_tableDiv';
		if(navigator.userAgent.indexOf('MSIE')>=0){
			obj.parentNode.style.overflowY = 'auto';
		}
		tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
		if(width.indexOf('%')>=0){
			obj.style.width = width;
			obj.parentNode.style.width = width;
		}else{
			obj.style.width = width + 'px';
			obj.parentNode.style.width = width + 'px';
		}
		
		if(height.indexOf('%')>=0){
	
			obj.parentNode.style.height = height;			
			
		}else{
 
			obj.parentNode.style.height = height + 'px';
		}
		obj.id = 'tableWidget' + tableWidget_tableCounter;
		addEndCol(obj);
		
		obj.cellSpacing = 0;
		obj.cellPadding = 0;
		obj.className='tableWidget';
		var tHead = obj.getElementsByTagName('THEAD')[0];
		var cells = tHead.getElementsByTagName('TD');
		for(var no=0;no<cells.length;no++){
			cells[no].className = 'tableWidget_headerCell';
			cells[no].onselectstart = cancelTableWidgetEvent;
			if(no==cells.length-1){
				cells[no].style.borderRight = '0px';	
			}
			if(sortArray[no]){
				cells[no].onmouseover = highlightTableHeader;
				cells[no].onmouseout =  deHighlightTableHeader;
				cells[no].onmousedown = mousedownTableHeader;		
				cells[no].onmouseup = highlightTableHeader;		
				cells[no].onclick = sortTable;	
				
				var img = document.createElement('IMG');
				img.src = arrowImagePath + 'arrow_up.gif';
				cells[no].appendChild(img);	
				img.style.visibility = 'hidden';
				
				var img = document.createElement('IMG');
				img.src = arrowImagePath + 'arrow_down.gif';
				cells[no].appendChild(img);	
				img.style.display = 'none';
				
				
			}else{
				cells[no].style.cursor = 'default';	
			}
			
			
		}		
		var tBody = obj.getElementsByTagName('TBODY')[0];
		if(document.all && navigator.userAgent.indexOf('Opera')<0){
			tBody.className='scrollingContent';
			tBody.style.display='block';			
		}else{
			tBody.className='scrollingContent';
			if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) { 
				tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px'; 
			}else{ 
				tBody.style.overflow='hidden'; 
			} 
			if(navigator.userAgent.indexOf('Opera')>=0){
				obj.parentNode.style.overflow = 'auto';
			}
		}
		
		for(var no=1;no<obj.rows.length;no++){
			obj.rows[no].onmouseover = highlightDataRow;
			obj.rows[no].onmouseout = deHighlightDataRow;
			for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
				if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
			}
		}
		for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
			if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
		}		
		
		tableWidget_tableCounter++;
	}
	
	function highlightDataRow()
	{
		if(navigator.userAgent.indexOf('Opera')>=0)return;
		this.className='tableWidget_dataRollOver';
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode;
			var tHead = divObj.getElementsByTagName('TR')[0];
			tHead.style.top = divObj.scrollTop + 'px';
			
		}	
	}
	
	function deHighlightDataRow()
	{
		if(navigator.userAgent.indexOf('Opera')>=0)return;
		this.className=null;
		if(document.all){	// I.E fix for "jumping" headings
			var divObj = this.parentNode.parentNode.parentNode;
			var tHead = divObj.getElementsByTagName('TR')[0];
			tHead.style.top = divObj.scrollTop + 'px';
		}			
	}
	
	</script>
</head>
<body>
 
	<script type="text/javascript"><!--
google_ad_client = "pub-0714236485040063";
/* 468x60, opprettet 14.08.08 */
google_ad_slot = "7945138075";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
	<p>This widget transforms a table like this</p>
<table>
	<thead>
		<tr>
			<td>Name</td>
			<td>Age</td>
 
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody class="scrollingContent">
		<tr>
 
			<td>John</td>
			<td>37</td>
			<td>Managing director</td>
 
			<td>90.000</td>
			<td>Male</td>
		</tr>
 
		<tr>
			<td>Susan</td>
			<td>34</td>
			<td>Partner</td>
			<td>90.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Head of marketing</td>
			<td>70.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
 
		</tr>
		<tr>
			<td>Rita</td>
			<td>30</td>
			<td>Photography</td>
			<td>54.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Magnus</td>
			<td>25</td>
			<td>Freelancer</td>
			<td>65.000</td>
			<td>Male</td>
 
		</tr>
	</tbody>
</table>
<p>into a fancy, sortable table like the one below. It works in both Firefox and IE and it's very easy to implement. <br>
<i>Click on the column headers to sort.</i></p>
<div class="widget_tableDiv">
<table id="myTable">
	<thead>
		<tr>
			<td>Name</td>
 
			<td>Age</td>
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody class="scrollingContent">
 
		<tr>
			<td>John</td>
			<td>37</td>
			<td>Managing director</td>
			<td>90.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Susan</td>
			<td>34</td>
			<td>Partner</td>
			<td>90.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>David</td>
			<td>29</td>
			<td>Head of production</td>
			<td>70.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Head of marketing</td>
			<td>70.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Kate</td>
			<td>18</td>
			<td>Marketing</td>
			<td>50.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Mona</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Mike</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Mark</td>
			<td>25</td>
			<td>Production</td>
			<td>52.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Peter</td>
			<td>33</td>
			<td>Production</td>
			<td>55.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>24</td>
			<td>Production</td>
			<td>49.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>David</td>
			<td>25</td>
			<td>Photography</td>
			<td>51.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Anna</td>
			<td>42</td>
			<td>Head of photography</td>
			<td>56.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Rita</td>
			<td>30</td>
			<td>Photography</td>
			<td>54.000</td>
			<td>Female</td>
 
		</tr>
		<tr>
			<td>Magnus</td>
			<td>25</td>
			<td>Freelancer</td>
			<td>65.000</td>
			<td>Male</td>
 
		</tr>
		<tr>
			<td>Johnny</td>
			<td>-29</td>
			<td>Freelancer</td>
			<td>63.000</td>
			<td>Male</td>
 
		</tr>
	
	</tbody>
</table>
</div>
<script type="text/javascript">
// Calling function that creates the table widget
// Input parameters: 
//	* id of table
//	* width of table(examples: 500, 99%)
//	* Height of table 
//  * Array of sortable columns ('S' = String, 'N' = numeric, false = no sort )
initTableWidget('myTable',600,250,Array('S','N',false,'N','S'));
</script>
	</body>
</html>
 
Loading Advertisement...
 
[+][-]10.03.2008 at 08:31AM PDT, ID: 22634971

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.03.2008 at 08:41AM PDT, ID: 22635075

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.03.2008 at 08:44AM PDT, ID: 22635098

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 - Hierarchy / EE_QW_2_20070628