CODEWITHSUNDEEP
htmlcssscrollscrollbar
Zeb-ur-Rehman
Zeb-ur-Rehman

Reputation: 1209

Horizontal Scrollbar Not shown

I'm try to show horizontal scroll bar. But instead of horizontal scroll bar it increases the height of div and if i change overfolw-x:scroll to overflow:scroll it shows me vertical scroll bar. Here below is the code. Thanks in advance.

<html>
<head>
    <title></title>
</head>
<body>
    <div id="main">
        <table style="width:800px; height:500px;border:1px solid black">
            <tr style="height:200px;border:1px dotted red;">
                <td>Test Text</td>
            </tr>
            <tr style="height:200px;border:1px dotted green;">
                <td>
                <div style="width:100%;height:100%;overflow-x:scroll;">
                    Hello this is a testing text to make sure that the division overflow. 
                    Thanks for visiting. bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla blackbla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla blackbla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                    bla bla black bla bla bla bla bla bla bla bla bla bla bla bla bla bla 

                </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Upvotes: 0

Views: 2032

Answers (1)

aBhijit
aBhijit

Reputation: 5391

You need to give a fix width to the div.

I also used:

.cont{
    white-space:nowrap;
}

You can use <br> tag if you want to split the text into multiple lines:

Check this fiddle:

http://jsfiddle.net/3Mjuu/3/

Upvotes: 2

Related Questions