I am currently facing an issue with displaying an HTML table in a UIWebView within my iOS app. The table itself looks great, but the borders of the cells and rows are overlapping the main table border.
Here's an example:
To style these borders, I have applied CSS classes directly to the HTML. Here is how my stylesheet is structured:
<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>
The formatting above is included in an NSString, and while I'm familiar with using CSS for iOS apps, I may not have gotten the syntax right.
For applying this CSS to the table, here is how it's implemented:
<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>