html - 当列宽大于容器时，水平滚动的固定列宽不显示

Question

当列的宽度大于包含 block 时，我试图有一个具有固定列宽和水平滚动的表格。

固定列宽的唯一时间是当列宽总和<包含 block (即无滚动)时

否则，固定列宽似乎会被忽略。有人知道怎么做吗？这是我的 html 和 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

我首先看到的是您还需要为表格标题单元格 (th) 指定宽度。试试看是否有帮助。你也给了 td 和 th {overflow-x:auto} 吗？