Clever Geek Handbook

How to make a vertical scrollbar on the left side and the horizontal scrollbar should start from the left side at the bottom

I've tried the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
    <div
        style="height: 100px; direction: rtl; overflow: auto; width: 150px;">
        <span style="direction: ltr;">
            <table>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
            <table>
        </span>
    <div>
</body>
</html>

the above code shows a vertical stripe on the left side, but a bottom horizontal stripe starting from the right side. can anyone help me get the bottom horizontal bar starting from the left side?

As per the above code, the image looks like this:

Getting this

I'm trying to get the default image by default:

Require this

+3


source to share


3 answers


You can do it. Set the div up using this style:

 height: 100px; direction: rtl; overflow: auto; width: 150px;

And then give span this style:



 <span  style="direction: ltr;">

This puts the vertical scrollbar to the left and sets the horizontal scrollbar to the left.

+2


source


I didn't even understand what a creature is.

I edited your code (and put it in jsbin). I changed the following:

<div style="height: 100px; direction: rtl; overflow: auto; width: 150px;">
    <div style="direction: ltr; width: 150px; overflow: auto;">


I changed the span to a div (because this is the default blocking element). The first div handles the vertical scrollbar, which should be in right-to-left mode. The second div handles the horizontal scrollbar, which should be the default.

You can see a working jsbin here

0


source


uninstall direction: rtl;

and it will solve your problem.

0


source






More articles:


All Articles