Please advise whether I am hallucinating... I hope so because I can't get tables to render correctly depending on the browser and I am hoping someone can provide me a solution.
My problems is that some tables do not display the right side borders with browsers that use webkit, i.e. Safari and Chrome. The version of Safari I am using is 4.0.4 (531.21.10) according to the about menu item under help. The version of Chrome I am using is supposedly the most recent according to Google's web site, but I could not find an "about" menu option under help to confirm the version...
The problematic tables are those that are using the colspan attribute depending on the number of columns. If the table has two or less columns with colspan, then the table displays correctly with the right border. If the table has 3 or more columns with colspan, then the table displays with a missing right side border. If the table does not have colspan, then the table displays correctly regardless of the number of columns. Why would the number of columns plus the colspan attribute have anything to do with the price of eggs in China?
BTW: the tables rendered correctly in IE, FF, and Opera... the problem is only with Safari and Chrome...
Here is the HTML source for the two column example that displays correctly:
<HTML>
<HEAD><TITLE>test Webkit with 2 columns</TITLE></HEAD>
<BODY>
<TABLE id="GridView1" border="0" cellSpacing="0"
style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
<TBODY><TR><TD colSpan=2>no items found</TD></TR></TBODY>
</TABLE>
<TABLE id="GridView2" border="0" cellSpacing="0"
style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
<TBODY>
<TR>
<TH scope=col>id_pur</TH>
<TH scope=col>subscription_pur</TH>
</TR>
<TR><TD>11</TD><TD>2</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
The above example renders two tables, both tables display the right side border.
Here is the HTML source for the three column example, where one table renders incorrectly:
<HTML>
<HEAD><TITLE>test Webkit with 3 columns</TITLE></HEAD>
<BODY>
<TABLE id="GridView1" border="0" cellSpacing="0"
style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
<TBODY><TR><TD colSpan=3>no items found</TD></TR></TBODY>
</TABLE>
<TABLE id="GridView2" border="0" cellSpacing="0"
style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
<TBODY>
<TR>
<TH scope=col>id_pur</TH>
<TH scope=col>subscription_pur</TH>
<TH scope=col>purchaser_pur</TH>
</TR>
<TR><TD>11</TD><TD>2</TD><TD>85</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
For the above example the first table, which has colspan, is missing the right border when displayed with webkit broswers, but the second table without colspan is not missing the border.
How can I get the right column to display when there are more than two columns and the colspan property is specified?