Match Header column width with column with of two different tables using css

Question

I want to match the header column width of a table with the column width of a different table using css.

How can I do this?

<div class="datagrid">
<table>
    <thead>
    <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </tr>
    </thead>
</table>

<div class="datagrid" style="height: 500px; overflow:auto;">
   <table>
      <tfoot>
      </tfoot>
      <tbody>
         <tr><td>col1</td><td>col2</td><td>col3</td></tr>
         <tr><td>col1</td><td>col2</td><td>col3</td></tr>
      </tbody>
   </table>
</div>

Answer 1

What have you got in between the two tables ?

my initial thought was to create a new table row and use COLSPAN="3", & put whatever text you like.

effectively, the lower cells will match up with the upper cells, & the middle text will not look like its part of the table.

(use various commands / settings to HIDE the table borders - so it doesn't look like part of the table.)

hope that makes sense