可调整大小的表格区域 PHP答案

【问题标题】：Resizable table area PHP可调整大小的表格区域 PHP
【发布时间】：2013-07-27 11:58:06
【问题描述】：

我试图一次显示很多结果（比如 25 个），但我的程序在第 5 条记录附近剪切了结果，但仍有可用的区域空间，结果在表格中动态创建，但似乎该区域没有相应扩展。

<div id="contenido" class="contenido">

 <div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
           <a>&Uacute;ltimas alertas</a>  </li>
    <li id="li_tab2" onclick="tab('tab2')">  <a>otras</a> </li>
</ul>

<div id="Content_Area">

    <div id="tab1">
        <p class="notas">Showing last alerts</p>
        <table>
            <tr>
                <td style="color:blue">Alert</td>
                <td style="color:blue">User</td>
            </tr>
            <?php
                while ( $row = $result->fetch_array() ){

                   echo "<tr><td>".$row['DESCRIPTION']."</td>";
                echo "<td>".$row['EMAIL']."</td>";
                echo "<td>".$row['SUB_SECCION']."</td></tr>";                   
                }
            }
            else
                echo "error on query: ".$conx->error;
            }//else
            ?>
        </table>        
    </div>

    <div id="tab2" style="display: none;"> 
         <!-- We set its display as none because we don’t want to make this
             tab visible by default. The only visible/active tab should 
             be Tab 1 until the visitor clicks on Tab 2. -->
        <p>This is the text for tab 2.</p>
    </div>

    </div> <!-- End of Content_Area Div -->
     </div> <!-- End of Tabs Div -->

     </div>

CSS 创建选项卡，但目前只有第一个有表格，另一个只有一行文本，但表格在这个选项卡 div 内 档案 css

 .contenido {  
 color: black;/*#333*/
 background-color: #F2F2E6;

 margin: 0px 0px 5px 0px;
 padding: 10px;
 border: 1px solid #ccc;

 width: 75%;/*678px;*/
 height: 480px;

 float: right; 
 display: inline; 
 }

   #Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
   }

   #Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
    }

  #Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;

/*  make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */

width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
       }

   #Tabs ul li a:hover {
text-decoration: underline;  
color:red;
    }

    #Tabs #Content_Area { 
   /* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
      }

     p { padding-left: 15px; }

【问题讨论】：

您应该发布整个代码，包括 CSS。如果需要，请使用pastebin.com，如果代码过多，请在问题中包含链接。
这个 >>> height: 480px; 可能是你的问题。尝试将其设置为height: auto; 或height: 100%;，或设置为更高的像素大小，例如height: 800px;（测试）。试试看，然后回复我。
当您查看源代码时，php 是否似乎给出了所有结果？
并确保echo $result->num_rows; 的回报大于5
如果您的数据库不是问题，您还可以将结果设置在iframe 中，如果它处于某个高度，滚动条就会显示出来。

标签： php html css mysql html-table

【解决方案1】：

我看到两个可能的原因：

数据库查询只返回 5 个结果
DIV 不够大，即使表格结束，比如说，25条记录，前5条只显示，其余的被 DIV 的边界隐藏。

如果您添加更多PHP 代码甚至是#area 的CSS，将会有所帮助。

【讨论】：

【解决方案2】：

问题出在 CSS 内部。

#Tabs #Content_Area 中的height: 150px; 和overflow: hidden; 可能是因素。

由于您将overflow: hidden; 设置为“隐藏”，这可能是一个因素。

尝试将其更改为 overflow:scroll; 或 overflow:visible; 以查看是否可行，和/或将这些 ID 的高度更改为更高的数字。

尝试不同的变体。

【讨论】：