Question

我试图用水平滚动创建日历，但我不想显示滚动条。

当我隐藏滚动条时，滚动被禁用，所以我试图欺骗父表上的隐藏溢出，但它不起作用

我正在使用Bootstrap v3.3.6

我的日历部分：

<div class="headers-calendar">
            <table class="table-responsive calendar" width="100%" cellspacing="0" cellpadding="0">
                <tbody><tr class="calendar-row">
                        <td class="calendar-day ">
                            <small >Thu</small>
                            <span class="day-number today">24</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Fri</small>
                            <span class="day-number">25</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Sat</small>
                            <span class="day-number">26</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Sun</small>
                            <span class="day-number">27</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Mon</small>
                            <span class="day-number">28</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Tue</small>
                            <span class="day-number">29</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Wed</small>
                            <span class="day-number">30</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Thu</small>
                            <span class="day-number">31</span><br>
                            <small>May</small>
                        </td>

                        <td class="calendar-day ">
                            <small>Fri</small>
                            <span class="day-number">01</span><br>
                            <small>Juin</small>
                        </td>
                </tr>
                </tbody></table>
            </div>

这是我的CSS：

.calendar{
  overflow:hidden
}
.calendar-row{
  overflow-x:auto
}

这是我的JSFiddle

https://jsfiddle.net/p53utp1y/1/

Answer 1

最好不要弄乱溢出，这是完全禁用滚动。

试试这段代码：

.headers-calendar::-webkit-scrollbar { 
display: none; 
}

水平滚动，无溢出自举

1 个答案: