Align columns to right

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Align columns to right

Post by agibsonsw »

Hello.

I've been searching but haven't discovered a way to align some table columns to the right? I tried the 'col' attribute but this seems to be ignored in IE and FF.

Is there not a css property that could do this? Thanks, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: Align columns to right

Post by jscher2000 »

This article has a set of suggestions of things to try, and not to try:

https://developer.mozilla.org/en/HTML/Element/col" onclick="window.open(this.href);return false;

I suspect you will need to double up, i.e., use col align for older IE, and use nth-child for newer browsers. If that actually works...

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

Hi. Thank you, I'll have a look at that in a minute.

Quick question.. I'm trying to paint my rows on hover. My table has id 'amazon' but this selector doesn't work?
#amazon > tr:hover { background-color:yellow; }
If I get this working, how can I disable the hover for the first row (header) please? I know you're the CSS man :cheers:

Perhaps amazon ... th:hover { background-color:inherit; } ?
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: Align columns to right

Post by jscher2000 »

agibsonsw wrote:Hi. Thank you, I'll have a look at that in a minute.

Quick question.. I'm trying to paint my rows on hover. My table has id 'amazon' but this selector doesn't work?
#amazon > tr:hover { background-color:yellow; }
If I get this working, how can I disable the hover for the first row (header) please? I know you're the CSS man :cheers:

Perhaps amazon ... th:hover { background-color:inherit; } ?
Ha ha, I'm still just a CSS adolescent.

You might need to use a space delimiter rather than a > delimiter because (at least in Firefox) there's likely to be an implicit <tbody> in between <table> and <tr>.

Speaking of which, if the header row is in a <thead> then you could add a level to your selectors and only target rows in the <tbody>.

Actually, I was in a thread once about performance and nesting selectors slows down the rendering, so probably the exception approach would work better for a large table.

Not sure this is helping.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

Jefferson: Hello.

My css seemed to work on occasion and was ignoring the header row anyway for some reason. Then I realised that it only worked after I'd click a (sort) link in the table header.

It seems IE and FF (and probably others) aren't keen on hovers within nested selectors and IE isn't keen if they're not 'a' links. I could achieve the effect with 'onmouseover' etc., but I'll abandon it for the moment as I'm only toying with it.

I spotted you in another forum - how's PHP? 'PHP 6 and MySql 5 Visual Quickpro Guide', by Larry Ullman is an excellent book - although I've put PHP to the side whilst I conquer JS.

Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: Align columns to right

Post by jscher2000 »

agibsonsw wrote:I spotted you in another forum - how's PHP? 'PHP 6 and MySql 5 Visual Quickpro Guide', by Larry Ullman is an excellent book - although I've put PHP to the side whilst I conquer JS.
Thanks. I need to break down and create a local test environment for PHP. The cycle of edit, ftp, 500 error gets so old. (Obviously I'm terrible at PHP!)

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

jscher2000 wrote:This article has a set of suggestions of things to try, and not to try:

https://developer.mozilla.org/en/HTML/Element/col" onclick="window.open(this.href);return false;

I suspect you will need to double up, i.e., use col align for older IE, and use nth-child for newer browsers. If that actually works...
This site states the selector 'tr:nth-child(n)' can align columns but it doesn't appear to work. I'll try using a 'col' tag in a 'colgroup'.

tr:nth-child(0) { text-align:right; } /* no joy */

I've achieved it with (yet another) big loop for each 'td' in the correct column but this is too slow/ messy. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

jscher2000 wrote:
agibsonsw wrote:I spotted you in another forum - how's PHP? 'PHP 6 and MySql 5 Visual Quickpro Guide', by Larry Ullman is an excellent book - although I've put PHP to the side whilst I conquer JS.
Thanks. I need to break down and create a local test environment for PHP. The cycle of edit, ftp, 500 error gets so old. (Obviously I'm terrible at PHP!)
You should use XAMPP http://www.apachefriends.org/en/xampp.html - it's brill!

Save your pages, start the Apache server and test your pages in your browser. Andy.
You do not have the required permissions to view the files attached to this post.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

Well I finally solved the alignment within columns with the following css:

Code: Select all

col.al { text-align: left;} /* for cols within a colgroup => IE < 8 */
col.ar { text-align: right;}    /* although largely ignored! */
col.ac { text-align: center;}

tr>th, tr>td {text-align: left;}
th+th+th, td+td+td {text-align: center;}
th+th+th+th, td+td+td+td {text-align: left;}
th+th+th+th+th, td+td+td+td+td {text-align: center;}
th+th+th+th+th+th, td+td+td+td+td+td {text-align: right;}
th+th+th+th+th+th+th, td+td+td+td+td+td+td {text-align: right;}
th+th+th+th+th+th+th+th, td+td+td+td+td+td+td+td {text-align: right;}
th+th+th+th+th+th+th+th+th, td+td+td+td+td+td+td+td+td {text-align: right;}
th+th+th+th+th+th+th+th+th+th, td+td+td+td+td+td+td+td+td+td {text-align: right;}
Looks great! You'd think this would be a simple task :hairout:

But I've still got to make this applicable to a specific table. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Align columns to right

Post by agibsonsw »

Concerning my quest to highlight table rows, I didn't like the solutions I found so:

My following procedure will highlight rows of a table when you move the mouse over them: Example use: HighlightRows('myTable','yellow');

If you have applied a background-color to the row already this will be re-instated when you move the mouse away. If you have individually set the background-color of certain cells, then they will remain that colour.

Code: Select all

function HighlightRows(tbl,colour) {	// supply the table name (or object) and the colour
	var evt, elem;						// you want for the highlight: HighlightRows('table1','yellow')
	if (typeof tbl === 'string') tbl = document.getElementById(tbl);	// any row background colour will be re-instated on mouseout
	if ( tbl.addEventListener ) {
		tbl.addEventListener('mouseover',function (e) {
			evt = e || window.event;
			elem = evt.target || evt.srcElement;
			if ( elem.nodeName == 'TD' ) {
				elem.prevColour = elem.parentNode.style.backgroundColor;
				elem.parentNode.style.backgroundColor = colour;
			}
		},false);
		tbl.addEventListener('mouseout',function (e) {
			evt = e || window.event;
			elem = evt.target || evt.srcElement;
			if ( elem.nodeName == 'TD' ) {
				elem.parentNode.style.backgroundColor = elem.prevColour;
			}
		},false);
	} else {			// Internet Explorer
		tbl.attachEvent('onmouseover',function (e) {
			evt = e || window.event;
			elem = evt.target || evt.srcElement;
			if ( elem.nodeName == 'TD' ) {
				elem.prevColour = elem.parentNode.style.backgroundColor;
				elem.parentNode.style.backgroundColor = colour;
			}
		},false);
		tbl.attachEvent('onmouseout',function (e) {
			var evt = e || window.event;
			var elem = evt.target || evt.srcElement;
			if ( elem.nodeName == 'TD' ) {
				elem.parentNode.style.backgroundColor = elem.prevColour;
			}
		},false);
	}
}
Works in FF, IE and Chrome.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.