HTML table borders being overlapped by cell borders

Question

I have a HTML table I am displaying in a UIWebView on my ios app. The table looks sweet however the table border and the <tr> or cell borders is overlapping the main table border.

Here is an example:

I am using CSS to style these borders and adding it to the html as classes. This is what my style sheet looks like.

<style type='text/css'>table.tdat{border-collapse:collapse;border-color:#000000; border-style:solid; border-width:1px;}td{padding:2px; font-family:Helvetica; color:black; font-size:12pt; height:15pt; text-align:right; vertical-align:top; white-space:nowrap;}tr.cta td{font-family:Arial; color:black; font-size:12pt; height:15pt; text-align:right;vertical-align:top;white-space:nowrap;border:1px solid #eeeeee;}tr.top td { border-top: thin solid black; }tr.bottom td { border-bottom: thin solid black; }tr.ax td:first-child { border-left: thin solid black; border-right: thin solid black;} </style>

This is from a NSString and I'm not 100% sure on css formatting as I have only ever used it while making iOS apps.

And then I use that CSS like this:

<table frame="box" class="tdat">
 <tr class="cta top ax">
  <td>Position:</td>
  <td width="20">1</td>
  <td width="20">2</td>
  <td width="20">3</td>
  <td width="20">4</td>
  <td width="20">5</td>
  <td width="20">6</td>
  <td width="20">7</td>
  <td width="20">8</td>
 </tr>
 <tr class="cta bottom ax">
  <td>Axis A:</td>
  <td>4</td>
  <td>3</td>
  <td>2</td>
  <td>2</td>
  <td>1</td>
  <td>3</td>
  <td>3</td>
  <td>2</td>
</table>

Answer 1

It's because you are setting borders on the top and bottom of the td, meaning that the side borders are going up an extra pixel The side borders show 'on top' of the top and bottom borders it seems. You can fix this with some tweaks. I'd add cellspacing="0" to the table HTML and remove border-collapse: collapse;. Then just style borders accordingly.

table.tdat{
  /*border-collapse:collapse; remove */
  border: 1px solid black;
}
td{
  padding:2px; 
  font-family:Helvetica; 
  color:black; 
  font-size:12pt; 
  height:15pt; 
  text-align:right; 
  vertical-align:top;
  white-space:nowrap;
}
tr.cta td{
  font-family:Arial; 
  color:black; 
  font-size:12pt; 
  height:15pt; 
  text-align:right;
  vertical-align:top;
  white-space:nowrap;
  border:1px solid #eeeeee;
  border-top: 0; /* ADD */
  border-bottom: 0; /* ADD */
}
/*tr.top td {
  border-top: thin solid black; REMOVE
}*/
tr.bottom td { 
  /*border-bottom: thin solid black; REMOVE*/
  border-top: 1px solid #eee;
}  
tr.ax td:first-child { 
  /*border-left: thin solid black; REMOVE */
  border-right: thin solid black;
  border-top-color: black;
}

http://jsbin.com/IQuYIBI/1/edit