Question

我有下表我要求它在手机/平板电脑上正确显示。我想在滚动条目中显示每天的每小时列和可用性列。

 <table class="table">
    <thead>
        <tr class="week">
            <th></th>
            <th class="day">Wednesday 18th</th>
            <th class="day">Thursday  19th</th>
            <th class="day">Friday    20th</th>
            <th class="day">Saturday  21st</th>
            <th class="day">Monday    23rd</th>
            <th class="day">Tuesday   24th</th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="hour in workhours" ng-init="selectedIndex=$index">
            <td >{{hour}}:00 - {{hour+1}}:00</td>

            <td ng-class = "{ 'full'     : !entry.HoursAvailable.includes(hour),
                              'selected' : renderGreen(selectedIndex, $index, jobLength)}" 
                ng-click = "checkSlotAvailability(hour, jobLength, entry, data)"
                ng-repeat= "entry in data.calendar">

                    <span ng-if="entry.HoursAvailable.includes(hour)">
                        Available
                    </span>
                    <span ng-if="!entry.HoursAvailable.includes(hour)">
                        Full
                    </span>
                    <span ng-if="entry.HoursAvailable.includes(hour) && renderGreen(selectedIndex, $index, jobLength)">
                        Selected
                    </span>
                    <span ng-if="entry.HoursAvailable.includes(hour) && !renderGreen(selectedIndex, $index, jobLength) && selectedIndex==selectedRow && $index==selectedColumn"> 
                        {{ data.response }}
                    </span>
            </td>
        </tr>
    </tbody>
</table>

我在chrome mobile dev工具上得到了各种奇怪的渲染。欢迎任何帮助。

Answer 1

您可以Bootstrap table utilities使表格响应;但是如果你有很多列，那么你可能会在移动视图中遇到水平滚动。

要解决此问题，您可以在表格中实现自定义过滤器，在桌面视图中，所有列都可见，而对于移动设备，可以看到少数列。

修改

请尝试this解决方案。这可能会有所帮助

希望这会对你有所帮助。

如何将媒体查询应用于ng-repeat表

1 个答案: