Прокрутка по горизонтали без переполнения начальной загрузки

Question

Я пытаюсь создать календарь с горизонтальной прокруткой, но я не хочу отображать полосу прокрутки.

Когда я скрываю полосу прокрутки, прокрутка отключена, поэтому я пытаюсь обмануть это скрытым переполнением родительской таблицы, но это не работает

Я использую Bootstrap v3.3.6

Myраздел календаря:

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