Question

首先，我意识到在这个问题上已经提出了许多问题，但我已经审查了所有这些问题（我能找到）但是它们似乎都没有解决我的问题。

我有一个父DIV（.timeline），我希望保存一个表示月/天的可变数量的表。当我水平滚动时，我会动态添加更多月份，但这样可行，但我无法让父DIV扩展宽度以适应任何新表格。

这是当前的HTML：

<div h-buffered-scroll="timeCtrl.adjustTimeline()" class="timeline">

        <div class="wrapper">
            <table ng-repeat="obj in timeCtrl.tLine">   
                <thead>
                    <tr>
                        <th class="monthhead" colspan="{{obj.days}}">
                            <div class="fixed">{{obj.monthYear}}</div>
                        </th>
                    </tr>
                    <tr>
                        <th ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index">
                            {{$index+1}}
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index"
                            id="{{obj.y}}_{{obj.m}}_{{$index+1}}"
                            ng-class="timeCtrl.isWorkDay('{{obj.y}}-{{obj.m}}-{{$index+1}}') ? 'work' : 'hol'">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

</div>

这是相关的CSS：

.timeline {
    position: relative;
    height: 90%;
    width: 95%;
    margin-left: 25px;
    border: 1px solid #eee;
    border-radius: 2px;
    overflow-x: auto;
    display: inline-block;
}

.timeline div {
    min-width: 1000%;
    height: 100%;
    display: block;
}

.timeline > div > table {
    height: 100%;
    float: left;
    table-layout: fixed;
}

我有最小宽度：1000％只是为了设置父宽度足以开始，但理想情况下我希望我不需要为此设置一个值应该只是展开以适应我创建的许多子表。发生的事情是前两个表适合1000％，然后下一个表（即下个月）然后在前两个表下面，因为它超过了父容器的宽度。

以下是我想要实现的目标：

+--------------------+
|+-----+ +----+ +----|--+  table 3 expands beyond parent div
||  1  | |  2 | |  3 |  |  and should be able to scroll to see
||     | |    | |    |  |
|+-----+ +----+ +----|--+
+------<-scroll->----+

我试图将显示设置为包装上的内联块，但这并不能帮助

将父DIV展开为动态子元素

0 个答案: