I threw something together using some CSS and javascript that I think does what you want. Only works in IE though at the moment. I'm not very good with javascript but I had an idea about this and it seemed to work.
The main drawback was that I couldn't get the table cells to stop wrapping lines so I put a div in each table cell that I set the height to 1em, width to that of the table cell and overflow:hidden. So its extra pretty useless code.
You can see an example here
I'm sure someone who actually knows javascript well could get it to work in other browsers than IE.
If you look at the first table cell in Firefox you can see that the method works in FF, but the script that goes through the table and ads that mouseover to each cell doesn't.
code:
<html>
<head>
<style type="text/css">
<!--
table {
width:500px;
}
td {
width:250px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
//write styles to hide overflowed content only if javascript is on to be
//able to show it
document.write("<style type=\"text/css\">" +
"td div {" +
" width:250px; " +
" height:1em; " +
" overflow:hidden; " +
"}</style>");
var re = new RegExp ('</?div>', 'gi') ;
function startList() {
tableRoot = document.getElementById("table");
for (i=0; i<tableRoot.cells.length; i++) {
node = tableRoot.cells[i];
node.onmouseover=function() {
this.title = this.innerHTML.replace(re,'');
}
}
}
window.onload=startList;
//-->
</script>
</head>
<body>
<table id="table" width="500" border="1">
<tr>
<td onmouseover="this.title = this.innerHTML.replace(re,'');">
<div>This is a test, this is just a test. All it really is is a test</div></td>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
</tr>
<tr>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
</tr>
<tr>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
</tr>
<tr>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
<td><div>This is a test, this is just a test. All it really is is a test</div></td>
</tr>
</body>
</html>
**edit** Ok, I fixed it so it works in Firefox as well the javascript now is
code:
var re = new RegExp ('</?div>', 'gi') ;
function startList() {
tableRoot = document.getElementById("table");
for (i=0; i<tableRoot.rows.length; i++) {
for(j=0; j<tableRoot.rows[i].childNodes.length;j++) {
node = tableRoot.rows[i].childNodes[j];
node.onmouseover=function() {
this.title = this.innerHTML.replace(re,'');
}
}
}
}
Not sure how this works in opera or any Mac browsers
(Edited by Nathus on 12-17-2004 00:42)
(Edited by Nathus on 12-17-2004 00:54)
posted 12-16-2004 22:02
