How can I get rid of this table border?

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

将border-bottom和border-top设置为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>