0

Im trying to create calendar with horizontal scroll but i dont want to display the scroll bar.

When i hide the scrollbar the scroll is disabled so im trying to cheat that with hidden overflow on parent table but it doesnt work

Im using Bootstrap v3.3.6

My calendar section : 

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

Here my CSS : 

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

Here my JSFiddle

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

logobi
  • 63
  • 1
  • 10
  • Maybe this one can help? https://stackoverflow.com/q/16670931/5178016 – kevin b. May 24 '18 at 15:38
  • Possible duplicate of [Hide "Horizontal" Scrollbar but still able to scroll](https://stackoverflow.com/questions/36405672/hide-horizontal-scrollbar-but-still-able-to-scroll) – Mickaël Leger May 24 '18 at 15:38
  • I didn't manage to make it works with css in your JSFiddle, try to use this maybe if you can't find a css solution: https://github.com/utatti/perfect-scrollbar – Mickaël Leger May 24 '18 at 15:43

1 Answers1

0

Better don't mess with overflow, this is to disable the scrolling entirely.

Try this code:

.headers-calendar::-webkit-scrollbar { 
display: none; 
}
Yan
  • 353
  • 1
  • 4
  • 13