Forum Moderators: not2easy
For example I might have a summary of the data like:
Tom Foo ¦ Cambridge, MA ¦ Active ¦ Show Details
Theresa Bar ¦ Newton, MA ¦ Suspended ¦ Show Details
Carter Fubar¦ Boston, MA ¦ New ¦ Show Details
The "Details" bit is a link to a hidden div containing a form, that is shown with javascript.
Tom Foo ¦ Cambridge, MA ¦ Active ¦ Hide Details
Name: Tom Foo
Street: 123 Anystreet
City: Cambridge
State: MA
Zip: 02138
Status: Active
Theresa Bar ¦ Newton, MA ¦ Active ¦ Show Details
Carter Fubar¦ Boston, MA ¦ New ¦ Show Details
(It looks better in real HTML :-)
My question: can I use a style to control the widths of the pseudo-columns (which I can wrap with spans)? I tried "width: 25em", for example and it didn't affect anything. "overflow:hidden" also doesn't seem to matter.
Ideas?
Thanks,
Tom Foo
So I used a table, and it works fine, if a bit ugly.
Thanks.
People are mean on the internet? GTFOH!
have a look at this example, not a table in sight. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#wrapper {
width:605px;
padding:4px 4px 0 4px;
border:1px solid #000;
margin:auto;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
}
.container {
width:605px;
margin-bottom:4px;
}
.container:after {
content:'';
display:block;
clear:both;
}
.container span {
width:150px;
line-height:22px;
border:1px solid #999;
border-right:0;
float:left;
text-align:center;
}
#s0,#s1,#s2,#s3 {
border-right:1px solid #999;
cursor:pointer;
}
#div0,#div1,#div2,#div3 {
clear:both;
padding:10px;
border:1px solid #999;
border-top:0;
}
.container p {
margin:0 0 10px 0;
}
.off {
display:none;
}
.on {
display:block;
color:#003;
background-color:#eef;
}
</style><script type="text/javascript">
var spn;
var dvs;
var info;
var count=0;window.onload=function() {
spn=document.getElementById('wrapper').getElementsByTagName('span');
dvs=document.getElementById('wrapper').getElementsByTagName('div');for(c=0;c<spn.length;c++) {
if(spn[c].id!='') {
count++;
spn[c].onclick=function() {
stuff(this.id.split('s')[1],this);
}
}
}
}function stuff(n,el) {
if(el.firstChild.nodeValue=='Show Details'){
for(c=0;c<count;c++){
document.getElementById('s'+c).firstChild.nodeValue='Show Details';
}
el.firstChild.nodeValue='Hide Details';
}
else {
el.firstChild.nodeValue='Show Details';
}info=document.getElementById('div'+n);
for(c=0;c<dvs.length;c++) {
if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
dvs[c].className='off';
}
}
if(info.className=='on') {
info.className='off';
}
else {
info.className='on';
}
}
</script></head>
<body><div id="wrapper">
<div class="container">
<span>Tom Foo</span><span>Cambridge, MA</span><span>Active</span><span id="s0">Show Details</span>
<div id="div0" class="off">
<p>Name: Tom Foo</p>
<p>Street: 123 Anystreet</p>
<p>City: Cambridge</p>
<p>State: MA</p>
<p>Zip: 02138</p>
<p>Status: Active</p>
</div>
</div><div class="container">
<span>Theresa Bar</span><span>Newton, MA</span><span>Suspended</span><span id="s1">Show Details</span>
<div id="div1" class="off">
<p>Name: Theresa Bar</p>
<p>Street: 123 Anystreet</p>
<p>City: Newton</p>
<p>State: MA</p>
<p>Zip: 02138</p>
<p>Status: Suspended</p>
</div>
</div><div class="container">
<span>Carter Fubar</span><span>Boston, MA </span><span>New</span><span id="s2">Show Details</span>
<div id="div2" class="off">
<p>Name: Carter Fubar</p>
<p>Street: 123 Anystreet</p>
<p>City: Boston</p>
<p>State: MA</p>
<p>Zip: 02138</p>
<p>Status: New</p>
</div>
</div><div class="container">
<span>Bird Brain</span><span>Chertsey, Sry </span><span>Very Old</span><span id="s3">Show Details</span>
<div id="div3" class="off">
<p>Name: Bird Brain</p>
<p>Street: 54 Station Road</p>
<p>City: Chertsey</p>
<p>State: Surrey</p>
<p>Zip: KT16 8BN</p>
<p>Status: Very Old</p>
</div>
</div></div>
</body>
</html>
I'll learn and understand from your example.
I think in another 5 to 10 years of continuous use I'll have some mastery of CSS, but's that only because I am smart.
Not.
Tom
The posted solution to circumvent tables is extremely bloated (no offense, birdbrain ;)). I find it interesting to what incredible lengths people are willing to go, in order to drop a table from the page (i.e. adding 100 lines of CSS, JS, HTML, as opposed to a 20 line table).
YIKES!
What is evil is table formatting, which can be many times as much text to download for a browser as just the plain table.
Of course then, you also have the CSS for the table, but generally it is still a lot less.
The posted solution to circumvent tables is extremely bloated ( no offense, birdbrain ;) ).
I find it interesting to what incredible lengths people are willing to go, in order to drop
a table from the page
No offense taken. ;)
But I would like to point out that the OP wrote...
I have some data I would like to display in a tabular form, but a table is not practical in the context.
...so the solution provided was as requested.
Also note that if tables had been used as you suggested, the javascript required would have basically
been the same and probably with very little difference in the CSS length for this project. ;)
birdbrain
What is evil is table formatting
Table within tables upon tables; a page built of nothing but tables - that is what most serious people detest. Tables have their place. They are a structural tool, just as <ul> are; who here hasn't tried pushing the <ul> to it's maximum 'potential', and maybe a little beyond? There is value to pushing CSS beyond simply 'simple presentation', and using it to manipulate the more 'complex presentation' of the HTML structure, e.g., CSS Zen Garden.
In the end you use what works, and experiment with what interests you. Down the road, the impossible or PITA challenge is just another entry in the 'library' that can be counted upon to work every time.
As you say, page layout is not a good use for them.
But tables themselves, even when used as tables can get pretty bloated without CSS, such as this kind of stuff, which with nested tables can grow to huge file sizes.
<tr>
<td><b><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Model</font></b></td>
<td>
<div align="center">
<b><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Part Number</font></b></div>
</td>
<td>
<div align="center">
<b><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Rating</font></b></div>
</td>
<td>
<div align="center">
<font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><b>Price</b></font></div>
</td>
