在表内的整列内部水平滚动

时间：2016-07-26 16:34:28

标签： html css vertical-scrolling

我有一张表格，显示了使用angular2组件

实施的测量员电车线路时间表

目前正在重复3天。我想重复它7天，它应该是可滚动的。滚动应该仅适用于电车轨道。有轨电车组件本身有很多风格，只要实现了滚动风格，它就会中断。我找了很多选项，找不到真正的解决方案。

这是日程安排组件的代码

<schedule-component ng-reflect-schedule="[object Object]" ng-reflect-     activities="[object Object]" ng-reflect-start-time="7" ng-reflect-end-time="18"><div class="inner">
    <div class="lane" ng-reflect-inner-h-t-m-l="&lt;div class=&quot;scheduleMarker mytooltip&quot; style = &quot;margin-left: 16.666666666666664%&quot;&gt;&lt;span class=&quot;mytooltiptext&quot;&gt;&lt;i class=&quot;fa fa-flag-o&quot;&gt;&lt;/i&gt;&amp;nbsp;Time: 09:00&lt;br/&gt;&lt;strong&gt; RG2 7HY&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot;  style= &quot;width: 4.166666666666666%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:00 - 09:30&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 0:30:&lt;br/&gt;Distance: 1.324 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-key&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:30 - 09:40&lt;/strong&gt;&lt;br/&gt;Key pickup&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:10&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot;  style= &quot;width: 6.944444444444449%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:40 - 10:30&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 00:50&lt;br/&gt;Distance: 4.532 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 8.333333333333332%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;10:30 - 11:30&lt;/strong&gt;&lt;br/&gt;Allocated booking&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 01:00&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot;  style= &quot;width: 4.166666666666666%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;11:30 - 12:00&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 00:30&lt;br/&gt;Distance: 3.532 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-key&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;12:00 - 12:10&lt;/strong&gt;&lt;br/&gt;Key drop&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:10&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa-exclamation-circle&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;14:30 - 15:00&lt;/strong&gt;&lt;br/&gt;No-working Time&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:30&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;scheduleMarker mytooltip&quot; style = &quot;margin-left: 8.333333333333332%&quot;&gt;&lt;span class=&quot;mytooltiptext&quot;&gt;&lt;i class=&quot;fa fa-flag-o&quot;&gt;&lt;/i&gt;&amp;nbsp;Time: 16:00&lt;br/&gt;&lt;strong&gt; RG2 7HY&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;"><div class="scheduleMarker mytooltip" style="margin-left: 16.666666666666664%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 09:00<br><strong> RG2 7HY</strong></span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;09:00 - 09:30</strong><br>Travel<br>Duration: 0:30:<br>Distance: 1.324 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;09:30 - 09:40</strong><br>Key pickup<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 6.944444444444449%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;09:40 - 10:30</strong><br>Travel<br>Duration: 00:50<br>Distance: 4.532 KM</span></div><div class="tram mytooltip" style="width: 8.333333333333332%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-home"></i><strong>&nbsp;10:30 - 11:30</strong><br>Allocated booking<br>EX2 7HY<br>Duration: 01:00<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;11:30 - 12:00</strong><br>Travel<br>Duration: 00:30<br>Distance: 3.532 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;12:00 - 12:10</strong><br>Key drop<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tram mytooltip" style="width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;"><span class="mytooltiptext" style="background-color:black"><i class="fa-exclamation-circle"></i><strong>&nbsp;14:30 - 15:00</strong><br>No-working Time<br>EX2 7HY<br>Duration: 00:30<br>This is some description</span></div><div class="scheduleMarker mytooltip" style="margin-left: 8.333333333333332%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 16:00<br><strong> RG2 7HY</strong></span></div></div>
</div>
</schedule-component>

有可能吗？我是否需要以任何其他方式实施？我刚刚下载了html并把它放在了一个plunker中。请参阅以下链接。

http://plnkr.co/edit/QOaBWK?p=preview

下面是我想要滚动条的描述。 Screenshot for how it should be

1 个答案:

答案 0 :(得分：0)

现在问题是不可逆转的，我通过重建再次实现了我自己的版本。

相关问题
最新问题