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.
Align columns to right
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Align columns to right
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Align columns to right
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...
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...
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
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
Perhaps amazon ... th:hover { background-color:inherit; } ?
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
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Align columns to right
Ha ha, I'm still just a CSS adolescent.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
Perhaps amazon ... th:hover { background-color:inherit; } ?
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
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.
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.
-
- 2StarLounger
- Posts: 148
- Joined: 26 Dec 2010, 18:17
Re: Align columns to right
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!)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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
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'.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...
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
You should use XAMPP http://www.apachefriends.org/en/xampp.html - it's brill!jscher2000 wrote: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!)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.
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
Well I finally solved the alignment within columns with the following css:
Looks great! You'd think this would be a simple task
But I've still got to make this applicable to a specific table. Andy.
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;}
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.
-
- SilverLounger
- Posts: 2403
- Joined: 05 Feb 2010, 22:21
- Location: London ENGLAND
Re: Align columns to right
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.
Works in FF, IE and Chrome.
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);
}
}
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.