Question

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

固定列宽度工作的唯一时间是列宽的总和<1。包含块（即没有滚动）

否则，固定列宽似乎被忽略。有人知道怎么做吗？这是我的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）赋予宽度。试试看看它是否有帮助。还有{overflow-x：auto}给td和th？

Answer 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>

Html表 - 使用水平滚动固定列宽 - 当列宽大于容器时不工作

2 个答案: