sen5241b Posted June 19, 2021 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/312943-web-ui-like-windows-view/ Share on other sites More sharing options...
Solution Barand Posted June 19, 2021 Solution Share Posted June 19, 2021 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/312943-web-ui-like-windows-view/#findComment-1587401 Share on other sites More sharing options...
jodunno Posted June 26, 2021 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/312943-web-ui-like-windows-view/#findComment-1587568 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.