个人中心
gpt4 book ai didi

php - 当采用 CSS 样式时表格被截断但在没有 CSS 的情况下完全显示(可滚动)

转载 作者：太空宇宙 更新时间：2023-11-04 04:03:44 25 4
gpt4 key购买 nike

我的 PHP 应用程序生成一个 HTML 格式的报告，该报告在移动屏幕上使用原始 HTML 标记显示良好，如下所示:

enter image description here enter image description here

我从网上获取了一些 CSS 代码，使表格看起来更漂亮。它显示效果很好，但不允许左右滚动，因此没有用。

enter image description here

对于 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/

25 4 0
文章推荐： c++ - 每个 session 的连接或通过一个连接多路复用多个 session
文章推荐： linux - Ubuntu Linux 服务器不允许我向上滚动/翻页
文章推荐： c - 指向链表的指针数组
文章推荐： linux - 如何在bash脚本中grep外部txt文件？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com