Complex header colspan

I use the following code for table header:

<thead>
<tr>
  <th width="101" rowspan="2"><strong>ID</strong></th>
  <th width="80" rowspan="2"><strong>Data Type</strong></th>
  <th colspan="2" align="center"><strong>From</strong></th>
  <th width="155" align="center"><strong>To</strong></th>
  <th width="75"><strong>Sent</strong></th>
  <th colspan="2" align="center"><strong>Received</strong></th>
  <th colspan="2" align="center"><strong>Data QC</strong></th>
</tr>
<tr>
  <th width="155"><strong>Company Name</strong></th>
  <th width="144"><strong>Sender Name</strong></th>
  <th><strong>Company Name</strong></th>
  <th><strong>Date</strong></th>
  <th width="75"><strong>Date</strong></th>
  <th width="40"><strong>%</strong></th>
  <th width="75"><strong>Date</strong></th>
  <th width="40"><strong>%</strong></th>
</tr>
</thead>

it should show the header cell labeled "From", and it will span two rows, so under it will be the header cells labeled "Company Name" and "Sender Name", and so on, it renders OK, but the problem is that there is no border between the top header cells, the ones that span 2 columns, the one's which cells labeled "From", "To", "Sent", "Received", and "Data QC".
The table is using the script "jquery.dataTables.min.js" version 1.8.0