我的 PHP 应用程序生成一个 HTML 格式的报告，该报告在移动屏幕上使用原始 HTML 标记显示良好，如下所示:
我从网上获取了一些 CSS 代码，使表格看起来更漂亮。它显示效果很好，但不允许左右滚动，因此没有用。
对于 CSS/HTML 专家的任何指示，我将非常感谢在代码中进行哪些调整以允许这样做，如下所示:
$dumpout = "<html>
<head>
<meta content=\"text/html; charset=ISO-8859-1\"
http-equiv=\"content-type\">
<style>
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 3px 10px;word-wrap:break-word; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }.datagrid table tfoot li { display: inline; }.datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}
</style>
<title></title>
</head>
<body>
As at $nowdt, Sales checks have been done on the following salesmen for $RunDate:
<div class=\"datagrid\">
<table style=\"text-align: left;\" border=\"1\" cellpadding=\"2\" cellspacing=\"2\">
<thead>
<tr>
<th align=\"right\">#</th>
<th align=\"right\">Salesman</th>
<th align=\"right\">Prior Check Date</th>
<th align=\"right\">Stock Found Now</th>
<th align=\"right\">Value Sold</th>
<th align=\"right\">Remittances</th>
<th align=\"right\">Excess/(Shortage)</th>
<th align=\"right\">Cumulative</th>
</tr></thead><tbody>";
while(!$rs->EOF)
{
$count++;
if ( !($count%2)) { $dumpout = $dumpout."<tr class=\"alt\">
<td align=\"right\">$count</td>"; }
else {
$dumpout = $dumpout."<tr>
<td align=\"right\">$count</td>"; }
$dumpout = $dumpout."<td align=\"right\">$smname</td>";
$dumpout = $dumpout."<td align=\"right\">$lastdate</td>";
$dumpout = $dumpout."<td align=\"right\">$scurrval</td>";
$dumpout = $dumpout."<td align=\"right\">$ssoldval</td>";
$dumpout = $dumpout."<td align=\"right\">$sremitval</td>";
$dumpout = $dumpout."<td align=\"right\"><b>$sdiff</b></td>";
$dumpout = $dumpout."<td align=\"right\"><b>$scdiff</b></td>";
$rs->MoveNext();
}
$rs->Close();
$dumpout = $dumpout."</tr>
<tr>
<td align=\"right\"></td>
<td align=\"right\"></td>
<td align=\"right\"><b>Totals</b></td>
<td align=\"right\"><b>$stotvalf</b></td>
<td align=\"right\"><b>$stotvals</b></td>
<td align=\"right\"><b>$stotremit</b></td>
<td align=\"right\"><b>$stotdiff</b></td>
<td align=\"right\"><b>$sctotdiff</b></td>
</tr><br/><br/>
";
最佳答案
在您的 css 中，您需要将 overflow: hidden 设置为 overflow: scroll
关于php - 当采用 CSS 样式时表格被截断但在没有 CSS 的情况下完全显示(可滚动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21658722/