...

View Full Version : border-collapse browser workarounds?



AndrewJB
01-15-2008, 07:37 PM
Hi, all. I have a table that looks something like this: http://mercuric.net/CSSTest.html. It renders perfectly in Opera 9 and Safari, but incorrectly (in different ways) on Firefox and IE. All of these are on Windows.

I think the CSS is proper, but does anyone have any ideas about this?

VIPStephan
01-15-2008, 08:10 PM
You CSS might be correct but your HTML isnít. Iím not sure why the validator passes the test but I have learned that each row must have the same amount of table cells or a colspan/rowspan if cells are supposed to span over more than one row/column (i.e. merged cells). In any case, the number of table cells must match, even if they are merged. Do the math.

To hide empty cells there is the empty-cells property which works with separate cell borders only, though.

AndrewJB
01-15-2008, 08:20 PM
Thanks a lot! Totally forgot that I could just add a cell with a colspan.

effpeetee
01-15-2008, 08:27 PM
As I have taken the trouble to asemble the code, I might as well post it.:D

(This before VIPStephan's post.)

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
div.DEMO-C
{
vertical-align: top;
white-space: nowrap;
}
div.DEMO-C table
{
width: 95&#37;;
height: 100px;
vertical-align: bottom;
background-color: White;
border: 1px inset #cccccc;
border-collapse: collapse;
}
div.DEMO-C tr.DEMO-D td,
div.DEMO-C tr.DEMO-E td
{
border: 1px solid #eeeeee;
}
div.DEMO-C tr.DEMO-E td
{
border-bottom: 1px solid #9e9e9e;
border-left: 1px solid #9e9e9e;
border-right: 1px solid #9e9e9e;
padding-bottom: 6px;
}
div.DEMO-C tr.DEMO-D td
{
border-top: 1px solid #9e9e9e;
border-left: 1px solid #9e9e9e;
border-right: 1px solid #9e9e9e;
}
table.DEMO-A
{
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" class="DEMO-A" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td class="DEMO-B">
<div class="DEMO-C">
<table align="center" class="DEMO-C">
<tr class="DEMO-D">
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr class="DEMO-E">
<td>
4</td>
<td>
5</td>
<td>
6</td>
</tr>
<tr class="DEMO-D">
<td>
7</td>
</tr>
<tr class="DEMO-E">
<td>
8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br />
<table align="center" class="DEMO-A" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td class="DEMO-B">
<div class="DEMO-C">
<table align="center" class="DEMO-C">
<tr class="DEMO-D">
<td>
1</td>
<td>
2</td>
<td>
3</td>
<td>
4</td>
</tr>
<tr class="DEMO-E">
<td>
5</td>
<td>
6</td>
<td>
7</td>
<td>
8</td>
</tr>
<tr class="DEMO-D">
<td>
9</td>
</tr>
<tr class="DEMO-E">
<td>
10</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum