How can I get rid of this table border? - html

Question

I've tried everything but nothing short of setting the outer-most table's border to 0 works. I want to get rid of the line below the cell with "big cell text" in it. Code is pretty messy but here's the link to jsfiddle so you could... fiddle around with it. The code to the table structure is exactly the same as what I use in the site but obviously the data is replaced.
Any clues?

Answer 1

Set border-bottom and border-top to none: http://jsfiddle.net/nUrE7/

Answer 2

Here you go. Added border-bottom:none; and border-top:none; in your code.
<table cellspacing="0" cellpadding="1" border="1" style="width: 100%;">
<tr >
<td colspan="7" border="0" style="width: 100%; text-align: left; height: 100px; vertical-align:middle;border-bottom:none;"> big cell text </td>
</tr>
<tr border="0">
<td colspan="7" border="0" style="width: 100%; text-align: left; vertical-align:middle;border-top:none; "><table cellspacing="0" cellpadding="1" border="0" style="width: 100%;">
<tr border="0">
<td border="0" width="10%"><strong>1:</strong></td>
<td border="0" width="90%" style="text-align: left;">text1</td>
</tr>
<tr border="0">
<td border="0" width="10%"><strong>2: </strong></td>
<td border="0" width="90%" style="text-align: left;">text2</td>
</tr>
</table></td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%;text-align: right;">Total</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">a</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">b</td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%; vertical-align:middle; text-align: center; height: 20px;"><strong>c</strong></td>
<td colspan="2" style="width: 26%; text-align: center; height: 20px; vertical-align:middle;">d</td>
</tr>
</table>