Question

I am trying to have a table with fixed column widths and horizontal scrolling when the width of the columns is greater than the containing block.

The only time the fixed column widths work is when the sum of column widths < containing block (i.e. no scroll)

Otherwise, the fixed column widths seem to get ignored. Anyone know how to do this? here’s my html and css.

    <div class="scroll-content-grid21">
    <div class="ExtraScrollableContainerDiv"> 
        <table class="regular" style="width:1440px"> 
            <tr>
                <th>Item #</th>
                <th>Description</th>
                <th>Rate</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Amount</th>
                <th>Prev Qty</th>
                <th>Prev Amt</th>
        etc. more columns
            </tr>

            <% 
               for (int i = 0; i < this.Model.BusinessObject.Items.Count; i++)
               {
               %>
            <tr>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotReferenceNumber %></td> 
                    <td style="width:240px"><%: this.Model.BusinessObject.Items[i].SnapshotShortDescription%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotUnitRate%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotQuantity%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotUnitOfMeasureId%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].SnapshotAmount%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].PreviousToDateQuantity%></td>
                    <td style="width:80px"><%: this.Model.BusinessObject.Items[i].PreviousToDateAmount%></td>
        etc. more columns

            </tr>
        </table>


div.scroll-content-grid21
{
    overflow : auto; 
    width: 1072px; /* notice, smaller than the table width */
    height: 500px;
}

table.regular 
{
    table-layout:fixed;  
    margin-top: 0.1em; 
    margin-bottom: 0.1em;
    border-collapse: collapse;
    text-align: left;
}

Answer 1

The first thing I can see is that you need to give width to your table header cells (th) as well. try this to see if it helps. Also have you given {overflow-x:auto} to td and th ?