IE8 table disappearing border-top

Question

Hi I have a table with border-top set to 2px. This works in every browser except IE8. CSS:

<style type="text/css">
.mytable {
    border-collapse: collapse;
    border: 0;
    border-top: 2px solid #43848C;
    width: 300px;
    margin:0 2em 1em;
    border-bottom: 1px solid #72afb6;
}
    .mytable tr {
        border-color: #72afb6;
        border-width: 1px 0;
        border-style: solid;
    }
        .mytable td {
            margin: 0; 
            padding: 8px 10px 7px 10px;
            border: 0 solid transparent;
            border-bottom: 1px solid #72afb6;
            vertical-align: middle;
            width: auto;        
        }
        .mytable .th {
            background-color: #f0f7f5;
            color: #42828b;
            font-weight: bold;
            font-variant: normal;
            font-size: 14px;
            vertical-align:top;
        }
</style>

HTML:

<table class="mytable">
  <tbody>
    <tr>
      <td class="th">Heading 1</td>
      <td class="th">Heading 2</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>

Thanks! Devin

Answer 1

Your supplied code works for me: http://jsbin.com/alaba/

Must be a problem elsewhere... :(