Jump to content

Web UI like Windows View?


sen5241b
 Share

Go to solution Solved by Barand,

Recommended Posts

I am trying to develop a UI using PHP., html,  css and javascript.  I have an app with a lot of HTML tables. I'd like to be able to reduce the size of the HTML tables and have one table come into focus at larger size when selected the same way windows task view works. Have you seen a web UI like this? Is there a template for it?

Link to comment
Share on other sites

  • Solution
Posted (edited)

You could use CSS, for example

#table1 {
    transform : scale(0.5);
}

Simple example

image.thumb.png.c91418e781b4933edb4ca968fe1107aa.png

Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpED 19.5 (Build 19515, 64bit)">
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<title></title>
<link rel="shortcut icon"  href="">
<style type='text/css'>
    .mini {
        Transform: scale(0.4);
    }
    div {
        display: inline-block;
        padding: 10px;
        vertical-align: text-top;
    }
    table {
        border-collapse: collapse;
    }
    th {
        background-color: black;
        color: white;
        padding: 8px;
    }
    td {
        padding: 4px 8px;
    }
</style>
<script type='text/javascript'>
    $().ready(function() {
        $("div").click( function() {
            $("div").addClass("mini")
            $(this).removeClass("mini")
        })
    })
</script>
</head>
<body>
<div id="div1" class="w3-container w3-responsive w3-center">
    Table 1 : Income<br>
    <table border="1" class="w3-table-all">
        <tbody>
        <tr><th>Id</th><th>userid</th><th>pay_date</th><th>amount</th></tr>
        <tr><td>1</td><td>1</td><td>2020-01-01</td><td>2500.00</td></tr>
        <tr><td>2</td><td>1</td><td>2020-02-01</td><td>2650.00</td></tr>
        <tr><td>3</td><td>1</td><td>2020-03-01</td><td>2400.00</td></tr>
        <tr><td>4</td><td>2</td><td>2020-01-01</td><td>3000.00</td></tr>
        <tr><td>5</td><td>2</td><td>2020-02-01</td><td>3100.00</td></tr>
        <tr><td>6</td><td>2</td><td>2020-03-01</td><td>2800.00</td></tr>
        </tbody>
    </table>
</div>
<div id="div2" class="mini w3-container w3-responsive w3-center">
    Table 2 : Expenditure<br>
    <table border="1" class="w3-table-all">
        <tbody>
        <tr><th>Id</th><th>userid</th><th>expend_date</th><th>expamount</th></tr>
        <tr><td>1</td><td>1</td><td>2020-01-15</td><td>800.00</td></tr>
        <tr><td>2</td><td>1</td><td>2020-01-25</td><td>250.00</td></tr>
        <tr><td>3</td><td>2</td><td>2020-01-21</td><td>1500.00</td></tr>
        <tr><td>4</td><td>2</td><td>2020-02-10</td><td>500.00</td></tr>
        <tr><td>5</td><td>2</td><td>2020-03-15</td><td>1800.00</td></tr>
        <tr><td>6</td><td>2</td><td>2020-03-20</td><td>1600.00</td></tr>
        </tbody>
    </table>
</div>
<div id="div2" class="mini w3-container w3-responsive w3-center">
    Table 3 : Employees<br>
    <table border="1" class="w3-table-all">
        <tbody>
        <tr><th>Id</th><th>pay</th><th>grade</th></tr>
        <tr><td>11</td><td>12500</td><td>3</td></tr>
        <tr><td>15</td><td>15000</td><td>5</td></tr>
        <tr><td>23</td><td>17000</td><td>7</td></tr>
        <tr><td>67</td><td>20000</td><td>9</td></tr>
        </tbody>
    </table>
</div>
</body>
</html>

Edited by Barand
Link to comment
Share on other sites

I have tried scaling before and it failed because browsers seem to keep the space of the original size. Thus multiple scaled items will not adjust to the new size in proportion with the page. I cannot remember exact details but it was horrible. I don't think any changes have been made to the rendering engines, so the problem should still remain.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.