HTML table too wide in IE7

Question

I've got a table that displays fine in Chrome, IE8, and IE9. In IE7, however, the table ends up being much wider than its content (100% of containing element?). How do I make the table only as wide as its content in IE7 and IE6 (and continue to display fine in newer browsers)?

Here's the table:

<table class="SisSubDetailTable">
    <tbody>
        <tr>
            <td>Date:</td><td>10-16-11</td><td>SOID:</td><td>SUST — Sustaining                                                                                          </td>
        </tr>
        <tr>
            <td>Status:</td><td>25 characters' worth of data</td><td>Work Order:</td>
            <td>     </td>
        </tr>
        <tr>
            <td>Company:</td><td>6K8  — KAPCO</td><td>Sub:</td><td>9999 </td>
        </tr>
        <tr>
            <td>Store:</td><td>34 characters' worth of data</td><td>Export Price:</td>
            <td>$0.00</td>
        </tr>
        <tr>
            <td>Class:</td><td>26 characters' worth of data</td><td>Control Ship:</td>
            <td>N</td>
        </tr>
    </tbody>
</table>

The following CSS seems to make the cells narrow, but the table as a whole is still much wider than 400px:

table.SisSubDetailTable
{
    width: 400px;
}

table.SisSubDetailTable td
{
    border-width: 0;
    width: 100px;
}

Answer 1

You should set its width property in css. Use guess and check to figure out how big you want it.