我使用的代码在iphone Safari浏览器和iphone的chrome浏览器中表现出色，但是如果将桌面浏览器的尺寸调整为较小的尺寸，则效果很好。 使用此代码的主要目的是使表具有响应性。如果您可以提出更好的建议，我将非常感激。
请找到代码摘录和所附屏幕截图的链接。
<?php
session_start();
if(!isset($_SESSION['simple_login'])){
header("Location: index.php");
exit();
}
# Copyright (c) 2009, cPanel, Inc.
# All rights reserved.
#
# Redistribution and use in source and binary forms, with or without modification, are permitted provided
# that the following conditions are met:
#
# * Redistributions of source code must retain the above copyright notice, this list of conditions and the
# following disclaimer.
# * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
# following disclaimer in the documentation and/or other materials provided with the distribution.
# * Neither the name of the cPanel, Inc. nor the names of its contributors may be used to endorse or promote
# products derived from this software without specific prior written permission.
#
# THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
# WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
# PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
# ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
# TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
# HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
# NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
# POSSIBILITY OF SUCH DAMAGE.
include 'xmlapi.php';
$ip = 'xxx.xxx.xxx.xxx';
$root_pass = 'cpanelpassword';
$email_domain = '__.com';
$account = "cpaneluser";
$notification="";
$xmlapi = new xmlapi($ip);
$xmlapi->password_auth($account,$root_pass);
$xmlapi->set_output("json");
$xmlapi->set_port(2082);
$xmlapi->set_debug(1);
if( isset($_POST['id']) )
{
$notification = json_decode($xmlapi->api1_query($account, "Email", "delpop", array($_POST['id'], $email_domain) ),true)[data][result];
}
if( isset($_POST['email']) )
{
$notification = json_decode(($xmlapi->api1_query($account, "Email", "addpop", array($_POST['email'], $_POST['password'], $_POST['quota'], $email_domain) )),true)[data][result];
}
if( isset($_POST['pwd']) )
{
$notification = json_decode($xmlapi->api2_query($account, "Email", "passwdpop", array( 'domain' => $email_domain, 'email' => $_POST['chngpwd'], 'password' => $_POST['pwd']) ),true)[cpanelresult][data][0];
}
$output = $xmlapi->api2_query($account, "Email", "listpopswithdisk" );
//print $output;
$obj = json_decode($output,true);
//echo "<pre>";
//print_r($obj);
//echo $obj["cpanelresult"]["data"][0];
?>
<html>
<head>
<link rel="icon" type="image/png" href="favicon.png">
<style>
#emails {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#emails td, #emails th {
border: 1px solid #ddd;
padding: 8px;
}
#emails tr:nth-child(even){background-color: #f2f2f2;}
#emails tr:hover {background-color: #ddd;}
#emails th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background: #2939B3;
background: linear-gradient(to right, #1385CC , #2939B3);
/* background-color: #4CAF50; */
color: white;
}
#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;
}
#emails2 thead {
background: #2939B3;
background: linear-gradient(to right, #1385CC , #2939B3);
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media screen and (max-width: 600px) {
#emails2 {
border: 0;
}
#emails2 caption {
font-size: 1.3em;
}
#emails2 thead, #emails2 th {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#emails2 tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
#emails2 td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
#emails2 td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
}
table td:last-child {
border-bottom: 0;
}
}
input[type=text], input[type=password], input[type=search] {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 6px 10px;
margin: 3px 0;
box-sizing: border-box;
}
input[type=button], input[type=Submit], input[type=reset], button {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: Transparent;
/*background-color: #4CAF50; */
/*border: none;*/
border: 2px solid #2939B3;
color: #2939B3;
padding: 6px 10px;
text-decoration: none;
margin: 3px 2px;
cursor: pointer;
}
</style>
<style>
.footer {
height:30px;
width: 100%;
/*background-color: #4CAF50; */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2939B3;
text-align: center;
}
</style>
<title>
Email Management
</title>
<!--link rel="stylesheet" type="text/css" href="styles.css" /-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>
<script type="text/javascript">
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
</script>
<div style="background: #2939B3; background: linear-gradient(to right, #1385CC , #2939B3); top: 0;left:0; width: 100%">
<center>
<font face="Trebuchet MS" size=25 color="white">EMAIL MANAGER</font></p> <button title="Logout" style="font-size:36px; color: white; position: absolute; right: 20; background: Transparent; border: none" onclick="window.location.href='logout.php'"><i class="fa fa-power-off"></i></button>
<img src="favicon.png"></img>
<br>
</center>
</div>
<div>
<center>
<br><font face="Trebuchet MS" color=#2939B3><b>Welcome, <?php echo $_SESSION['simple_login']; ?></b>
</center>
</div>
<br><br>
<?php
if ($notification != "")
{
echo "<font color=red>".$notification."</font>";
}
?>
<table id="emails">
<tr class="tableheader">
<th align="center"><u>User Dashboard</u></th>
</tr>
</table>
<br>
<div style="width: 100%; max-width: 512px;">
<table id="emails">
<tr><th colspan="2" align="center"><b><u>Add an email account</b></u>
<tr><td class="tableheader">
<form method=POST action="<?php echo $_SERVER['PHP_SELF']; ?>">
Email: <td class="tablerow"><input type="text" name="email" style="width: 100%;"><tr><td class="tableheader">
Password: <td class="tablerow"><input type="password" name="password" style="width: 100%;"><tr><td class="tableheader">
Quota (MB): <td class="tablerow"><input type="text" name="quota" style="width: 100%;"><tr><td class="tableheader" colspan="2" align="center">
<input type="Submit" value="Submit" style="width: 100%;">
</form>
</table>
</div>
<br>
<!-- to make responsive table using div-->
<table id="emails">
<b><tr class="tableheader"><th align="center" colspan="9"><u>Email accounts</u></table>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">
<div style="overflow-x:auto;">
<table id="emails2" class="order-table table">
<b><thead><th>Domain<th>Email<th>Login<th>User<th>Disk Quota<th>Disk Used<th>Used Percentage<th>Delete<th>Change Password</b></thead><tbody>
<?php
foreach ($obj["cpanelresult"]["data"] as $k => $v)
{
//echo $k." ".$v."\n";
//echo $v["login"];
?>
<tr><td data-label="Domain">
<?php
echo $v["domain"]."</td>
<td data-label=\"Email\">".$v["email"]."</td>
<td data-label=\"Login\">".$v["login"]."</td>
<td data-label=\"User\">".$v["user"]."</td>
<td data-label=\"Disk Quota\">".$v["diskquota"]."</td>
<td data-label=\"Disk Used\">".$v["diskused"]."</td>
<td data-label=\"Used Percentage\">".$v["diskusedpercent20"];?></td>
<form method=POST action="<?php echo $_SERVER['PHP_SELF']; ?>">
<td data-label="Delete"><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 $_SERVER['PHP_SELF']; ?>">
<td data-label="Change Password"><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></tr>
<?php
/*
foreach ($v as $i=>$j)
{
echo $i." ".$j."\n";
}
*/
echo "\n";
}
?>
</tbody></table>
</div>
<footer class="footer">
<p>Powered by <a href="http://www.byteitcorp.com" style="color:#2939B3;">ByteIT Corp</a></p>
</footer>
</body>
</html>