水平滚动而不溢出引导程序

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; 
}