CODEWITHSUNDEEP
cssresponsive
SebCollard
SebCollard

Reputation: 332

How to add a horizontal scroll bar on smartphone?

In my web project I have a table and I add a scroll on the div which surround the table with this : 

@media screen and (min-width:1000px){
    .scroll_table {
        overflow-x : scroll !important;
    }
}

So for the responsive on mobile browser there is no scroll bar and table isn't display in totality (You can see thios on the image bellow). Desktop browser: enter image description here

Mobile browser :

Upvotes: 2

Views: 3182

Answers (2)

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

I can see one issue in your media query.

Your current media query for 1000px and above. You need to replace it with 1000px and below.

Please try below CSS.

 /* @media screen and (min-width:1000px)*/ /*old*/
    @media screen and (max-width:1000px){
     .scroll_table {
       overflow-x : scroll !important;
       -webkit-overflow-scrolling: touch;
      }
   }

Upvotes: 1

A. Meshu
A. Meshu

Reputation: 4148

You need to declare the overflow-x property on block element (div) that wrap the table. You didn't provide code so this generic example will demonstrate you:

<div style="overflow-x: auto">
    <table>
        <caption>overflow x table</caption>
        <thead>
            <tr>
                <th>title 1</th>
                <th>title 2</th>
                <th>title 3</th>
                <th>title 4</th>
                <th>title 5</th>
                <th>title 6</th>
                <th>title 7</th>
                <th>title 8</th>
                <th>title 9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>some data 1</td>
                <td>some data 2</td>
                <td>some data 3</td>
                <td>some data 4</td>
                <td>some data 5</td>
                <td>some data 6</td>
                <td>some data 7</td>
                <td>some data 8</td>
                <td>some data 9</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 2

Related Questions