This took much longer than anticipated. After a few iterations using different header control sets, we ended up back to using a table for the headers. The trick was to...
1) Determine the css attributes/values that were required for proper processing. After a successful combination was determined, these values were hardcoded into component inititalization logic.
2) Realize that when setting a TDs width to attain a specific dimension, the padding and border-width settings of the TD being set need to be taken into account (removed from the desired size).
3) Determine the component structure that would faciliate the required functionality... self contained logic (as much as possible) and resizing the outer container resizing the control properly.

The following HTMLGrid implementation is from HtmlGridSamnple.html / .js / .css

HTML definition/requirements
Notes:
* The component tree outlined below is required and number of header TDs should match the visible data columns/TDs
* Class settings aren't required, but surely you'll want to format it

/* Add the htmlGrid object library */
<script type="text/javascript" src="psi.ui.htmlGrid.js"></script>
...
<div id="divGridContainer" class="divGridContainer">
  <div id="divHeaders" class="divHeaders">
    <table id="tblHeaders" class="tblHeaders">
      <tr id="trHeaders" class="trHeaders">
        <td id="hdr1" class="hdrAll hdr1">Header 1</td>
        <td id="hdr2" class="hdrAll hdr2">Header 2 And More And More And More</td>
        <td id="hdr3" class="hdrAll hdr3">Header 3</td>
      </tr>
    </table>
  </div>

  <div id="divTableData" class="divTableData">
    <table id="tblData" class="tblData">
      <tr>
        <td class="tdAll td1">Cell Content 1</td>
        <td class="tdAll td2">Cell Content 2</td>
        <td class="tdAll td3">Cell Content 3</td>
      </tr>
      <tr>
        <td class="tdAll td1">More Cell Content 1</td>
        <td class="tdAll td2">More Cell Content 2</td>
        <td class="tdAll td3">More Cell Content 3</td>
      </tr>
    </table>
  </div>
</div>

JavaScript
* Define a variable for each grid implemented on the page
* Initialize the grid(s) in the page onload handler
* Add a formatGrid call for each grid object in the page onresize handler.
* The sample page contains a demonstration containing multiple grid controls on one page.

var _psiHtmlGrid = null;
function pageLoaded(event) {
  /* Prep the psi.ui.htmlGrid object */
  /* If multiple grids on one page, Prep a psi.ui.htmlGrid object for each */
  var divGridContainer = document.getElementById("divGridContainer");
  var divHeaders = document.getElementById("divHeaders");
  var divTableData = document.getElementById("divTableData");
  _psiHtmlGrid = new psi.ui.htmlGrid(divGridContainer, divHeaders, divTableData);
  /* If you have a debug message logger with a func(msg) signature, it can be assigned to the object */   //_psiHtmlGrid.setDebugMsgFunc(addDebugMsg);

  /* Run the initial sync on the grid */
  _psiHtmlGrid.formatGrid();
}
window.onload = pageLoaded;

function pageResized(event) {
  _psiHtmlGrid.formatGrid();
}
window.onresize = pageResized;


CSS
Take a look at HTMLGridSample.css, it's commented fairly well.
You should be able to do anything you want to the header and data TD elements.
Library owned settings are identified.
Interesting... This css contains eve/odd row selectors. Good for alternating data row colors.