style a <thead>

Question

I have the following :

<table style="border:solid 1px; border-color:black">
  <thead style="border:solid 2px; border-color:black"> 
    <tr>
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C01753</p>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C00522</p>
      </td>
    </tr>
  </tbody>
</table>

I'd like to add a border around the whole table and one around the whole header. The table border is showing nicely (Internet Explorer), but the header border is not.

PS: I use inline styles because it's meant for a HTML body in a mail message.

EDIT

The following gave me what I wanted in Firefox, not in IE though

<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr style="border: 1px solid black">
    ...

EDIT

Added coloring

<table style="border: 2px solid black; border-collapse: collapse;">
  <thead>
    <tr style="border: 1px solid black; background-color: #EEE;">
    ...

Answer 1

Use rules="groups" and change your structure a bit:

<table style="border: 1px solid black; border-collapse: collapse;" rules="groups">
  <thead style="border: 2px solid black;"> 
    <tr>
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C01753</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>18/03/11</p>
      </td>
      <td>
        <p>C00522</p>
      </td>
    </tr>
  </tbody>
</table>

---

EDIT: Well, that doesn's seem to work in IE. In that case, I'd suggest:

<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr style="background-color: black; color: white;">
      <!-- ... -->

Answer 2

You can't style a <thead> element, you need to style the <tr>

for example, like this

<table style="border:solid 1px black" cellpadding="0" cellspacing="0">
  <thead> 
    <tr style="background-color: #EEE;">
      <th>
        <p>Document Date</p>
      </th>
      <th>
        <p>Buy-from Vendor No.</p>
      </th>
    </tr>
  </thead>
...

border styling does not apply, the normal thing is use the background color.

and btw border supports 3 attributes, including the color as well like

border: solid 1px black;