Web UI like Windows View?

sen5241b · June 19, 2021

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?

Barand · June 19, 2021

You could use CSS, for example

#table1 {
    transform : scale(0.5);
}

Simple example

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 June 19, 2021 by Barand

jodunno · June 26, 2021

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.

Sign In

Web UI like Windows View?

Recommended Posts

sen5241b

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

jodunno

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information