How do I create borders around tbody/thead sections of a table?

Question

I am attempting to create a page with tabular data, which must appear as multiple tables. I have two conflicting requirements to get around, however:

1. Each table must have a border around it.
2. Column widths for each table must be able to re-size based upon the content. However, the column widths must be consistent across all tables. (i.e. the size of a column is based upon the largest cell in that column across all tables).

To handle the second requirement, I have a single, top-level table which contains multiple thead and tbody sections. This accomplishes #2 beautifully. Essentially, I have created multiple pseudo-tables within a larger parent table, grouped as a single thead with an accompanying tbody:

<table>
   <thead>
      table1 header content...
   </thead>
   <tbody>
      table1 body content...
   </tbody>
   <thead>
      table2 header content...
   </thead>
   <tbody>
      table2 body content...
   </tbody>
</table>

Now, I am attempting to address the first requirement. Each pseudo table must have a border around it, passing itself off as a genuine table.

I have found, to my dismay, that IE 6/7 do not allow for adding border styles around thead/tbody tags, or I would simply have added a top/left/right border style to thead and a bottom/left/right border style to tbody.

Creating genuine tables and styling borders for those works to solve #1, but it breaks #2.

Another alternative would be to use first-child and last-child styles to create my borders. Unfortunately, this is neither pretty, nor does it work in IE 6/7.

Another alternative I have been looking into is creating a border around the entire table and attempting to create a row between the pseudo-tables which creates my separation, but while I can create top/bottom borders for it ok, I have yet to discover a means to erase the table's left/right border for just that row. Is that possible?

My last-ditch alternative is to create classes for drawing left, right, top, and bottom borders, setting the appropriate table cells to use these classes. I know this will ultimately work, but it is horribly clunky and makes for really messy markup. Colgroups cannot save me here, as they are incapable of handling border styles. That is unfortunate, as it would make this solution a little easier to stomach.

Is there a better method to accomplish the borders that I may have missed?

Answer 1

use <table rules="groups"> or similar values for rules

see http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Answer 2

Go with the method for creating the genuine tables, then try this.

I would just go with creating separate tables. Let's suppose each table looks like this:

<table>
    <thead>
        <tr>
            <th class="column_1">Header 1</th>
            <th class="column_2">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        ...
    </tbody>
</table>

Then, use jQuery to set the width:

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready( function() {
    $(".column_1").each( function() {
        if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
    });
    $(".column_2").each( function() {
        if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
    });

    $(".column_1").css({width: columnOneWidth + "px"});
    $(".column_2").css({width: columnTwoWidth + "px"});
});

All you have to do is include the jQuery Javascript file (available from jquery.com) in your head tag:

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>