当列宽大于容器时，不显示具有水平滚动的固定列宽答案

【问题标题】：Fixed column width with horizontal scrolling doesn't show when the column widths larger than container当列宽大于容器时，不显示具有水平滚动的固定列宽
【发布时间】：2019-08-03 22:36:59
【问题描述】：

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

固定列宽的唯一工作是当列宽的总和

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

【问题讨论】：

标签： html css scroll html-table

【解决方案1】：

我能看到的第一件事是，您还需要为表格标题单元格 (th) 提供宽度。试试这个，看看它是否有帮助。你也把 {overflow-x:auto} 给了 td 和 th 吗？

【讨论】：

对于那些在搜索如何向表格列添加自动水平滚动条时偶然发现这个问题和答案的人，Valipour 的添加点 overflow-x:auto;到 css 或 style="overflow-x:auto;"表格是如何在小列宽中获得大值的自动水平滚动。谢谢，瓦利普尔！也许你应该把这个点放大而不是“也”？

【解决方案2】：

这里有一个示例供其他需要它的人使用：

<html>
<head>
<style>
  div.outer
  {
            width : 500px; 
            overflow : auto;
  }
  table
  {
     table-layout:fixed; 
     width: 100%; /* same as containing div */
  }
  th, td
  {
            border: solid 1px #ccc;
  }

</style>


</head>
<body>

<div class="outer">
    <div class="scrollable">
            <table>
                        <thead>
                                    <th style="width:50px">One</th>            
                                    <th style="width:300px">Two</th>
                                    <th style="width:200px">Three</th>
                                    <th style="width:200px">Four</th>
                                    <th style="width:200px">Five</th>
                        </thead>
                        <tbody>
                                    <tr>
                                                <td>001</td>
                                                <td>My really long description here</td>
                                                <td>10.0 units</td>
                                                <td>$100.00 dollars</td>
                                                <td>$1000.00 total</td>
                                    </tr>
                                    <tr>
                                                <td>002</td>
                                                <td>This is number 2</td>
                                                <td>5 units</td>
                                                <td>$5.00 dollars</td>
                                                <td>$25.00 total</td>
                                    </tr>

                        </tbody>
            </table>
    </div>
</div>


</body>
</html>

【讨论】：