Menu
The codes which I have used acts fancy in iphone safari browser and iphone’s chrome browser but if I resize the desktop browser to a smaller size, it works perfectly.
Please find the extract of the codes and the link of the screenshot attached.
#emails2 {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#emails2 td, #emails th {
border: 1px solid #ddd;
padding: 8px;
}
#emails2 tr:nth-child(even){background-color: #f2f2f2;}
#emails2 tr:hover {background-color: #ddd;}
#emails2 th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
#emails2 table, #emails2 thead, #emails2 tbody, #emails2 th, #emails2 td, #emails2 tr
{
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#emails2 th {
position: absolute;
top: -9999px;
left: -9999px;
}
#emails2 tr { border: 1px solid #ccc; }
#emails2 td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
#emails2 td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
#emails2 td:nth-of-type(1):before { content: “Domain”; }
#emails2 td:nth-of-type(2):before { content: “Email”; }
#emails2 td:nth-of-type(3):before { content: “Login”; }
#emails2 td:nth-of-type(4):before { content: “User”; }
#emails2 td:nth-of-type(5):before { content: “Disk Quota”; }
#emails2 td:nth-of-type(6):before { content: “Disk Used”; }
#emails2 td:nth-of-type(7):before { content: “Used Percentage”; }
#emails2 td:nth-of-type(8):before { content: “Delete”; }
#emails2 td:nth-of-type(9):before { content: “Change Password”; }
}
<head><meta name=”viewport” content=”width=device-width, initial-scale=1.0″></head>
<table id=”emails”>
<tr class=”tableheader”><th align=”center” colspan=”9″>Email accounts</table>
<div style=”overflow-x:auto;”>
<table id=”emails2″>
<tr class=”tableheader”><th>Domain<th>Email<th>Login<th>User<th>Disk Quota<th>Disk Used<th>Used Percentage<th>Delete<th>Change Password
<?php
foreach ($obj[“cpanelresult”][“data”] as $k => $v)
{
//echo $k.” “.$v.”n”;
//echo $v[“login”];
?>
<tr class=”tablerow”><td>
<?php
echo $v[domain].”<td>”.$v[email].”<td>”.$v[login].”<td>”.$v[user].”<td>”.$v[diskquota].”<td>”.$v[diskused].”<td>”.$v[diskusedpercent20];?>
<form method=POST action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
<td><input type=”hidden” name=”id” value=”<? echo $v[email] ?>” ><input type=”submit” value=”Delete” onclick=”return confirm(‘Are you sure you want to delete <? echo $v[email] ?>?’)”>
</td>
</form>
<form method=POST action=”<?php echo $
<td><input type=”password” name=”pwd”><input type=”hidden” name=”chngpwd” value=”<? echo $v[email] ?>”><input type=”submit” value=”Change Password” onclick=”return confirm(‘Are you sure you want to change password for <? echo $v[email] ?>?’)”>
</td>
</form>
<?php
/*
foreach ($v as $i=>$j)
{
echo $i.” “.$j.”n”;
}
echo “n”;
}
?>
</table>
</div>