Stylists...
I'm having problems collapsing a column. Specifically, I want to
collapse the last column of a table. My initial test with a large data
set worked, but I cannot make it work with a small example.
Here are links to the data files (source included below):
http://home.covad.net/~holmespun/200...apse_test.html
http://home.covad.net/~holmespun/200...lapse_test.css
These Validate for HTML and CSS using the W3C validation tools.
I'm working with FF 1.0.1 (Windows & Linux). The test also fails for IE
6.0 but I already know of a "display:no ne" work-around.
http://www.richinstyle.com/test/tabl...ycollapse.html
I would not be concerned, but for my initial success, and for the fact
that the RichInStyle.com test page for collapsing columns (link above)
appears to work.
Additional note 1: Adding "visibility:col lapse" style to the <th> and
each <td> of the third column causes the data in these cells to be
hidden in FF, but the column still does not collapse.
Additional note 2: Adding the IE work-around "display:no ne" style to
the third column causes FF to ignore the column width setting. FF
correctly ignores the "display:no ne" style for the column.
Thanks in advance.
....Holmespundi t
-- CSS Follows:
/*
** 20050320_column _visibility_col lapse_test.css
*/
table {
border: 2px solid;
}
td {
border: 1px dashed;
text-align: center;
}
col {
width: 200px;
}
col.noshow {
visibility: collapse;
}
/* (eof)
*/
-- HTML Follows:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
20050320 Column Visibility Collapse Test
</title>
<style type="text/css">
@import "20050320_colum n_visibility_co llapse_test.css ";
</style>
</head>
<body>
<h1>
20050320 Column Visibility Collapse Test
</h1>
<div>
<table>
<col/>
<col/>
<col class="noshow"/>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>Uno</td>
<td>Due</td>
<td>
Many words that should not be seen.
</td>
</tr>
<tr>
<td>Won</td>
<td>Too</td>
<td>
Many words that should not be seen.
Many words that should not be seen.
Many words that should not be seen.
</td>
</tr>
</table>
</div>
</body>
</html>
