Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: ing_jp en 26 de Agosto 2016, 21:57

Título: Cómo hacer una tabla HTML de tamaño fijo con scroll si los datos exceden tamaño
Publicado por: ing_jp en 26 de Agosto 2016, 21:57

Buenas amigos, necesito una ayuda, quiero hacer mi tabla que se carga con datos de mi base de datos MySQL

Les dejo como está mi codigo...

Código: [Seleccionar]

<div id="DivRoot" align="left">
                                                <div style="overflow: hidden;" id="DivHeaderRow">
                                                </div>
                                                <div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
<?php //E8C970
                                                        $NumItem = 1;
                                                        $result = mysql_query("SELECT ID_Empresa, NombreEmpresa, Acronimo, RazonSocial, NitRut, Rubro, Ciudad, Telefono, Fax, CelCorp, Nacionalidad, UV, Manzano, Nro, CorreoCorp, Web, Direccion FROM tbl_Empresa WHERE Estado = 1 AND ID_Cliente = $ID_Cliente", $Conexion); 
                                                        if ($row = mysql_fetch_array($result))
                                                        { 
                                                            echo "<table width=50% border = '1' bgcolor='#00FFFF'> \n"; 
                                                            echo "<tr align='center'>
                                                                <td><b>ITEM</b></td>
                                                                <td><b>NOMBRE DE LA EMPRESA</b></td>
                                                                <td><b>ACRONIMO</b></td>
                                                                <td><b>RAZON SOCIAL</b></td>
                                                                <td><b>NIT / RUT</b></td>
                                                                <td><b>RUBRO</b></td>
                                                                <td><b>CIUDAD</b></td>
                                                                <td><b>TELEFONO</b></td>
                                                                <td><b>FAX</b></td>
                                                                <td><b>NUMERO COORPORATIVO</b></td>
                                                                <td><b>NACIONALIDAD</b></td>
                                                                <td><b>UV</b></td>
                                                                <td><b>MANZANO</b></td>
                                                                <td><b>NRO.</b></td>
                                                                <td><b>CORREO COORPORATIVO</b></td>
                                                                <td><b>WEB</b></td>
                                                                <td><b>DIRECCION</b></td>
                                                                </tr> \n"; 
                                                            do
                                                            { 
                                                                echo
                                                                "<tr>
                                                                <td align='right'> <input type='hidden' class='paq-pub-id' value = ".$row["ID_Empresa"]." /> ".
                                                                $NumItem."</td>".
                                                                "<td class='pub-NombreEmpresa' align='left'>".$row["NombreEmpresa"]."</td>".
                                                                "<td class='pub-Acronimo' align='left'>".$row["Acronimo"]."</td>".
                                                                "<td class='pub-RazonSocial' align='left'>".$row["RazonSocial"]."</td>".
                                                                "<td class='pub-NitRut' align='left'>".$row["NitRut"]."</td>".
                                                                "<td class='pub-Rubro' align='left'>".$row["Rubro"]."</td>".
                                                                "<td class='pub-Ciudad' align='left'>".$row["Ciudad"]."</td>".
                                                                "<td class='pub-Telefono' align='left'>".$row["Telefono"]."</td>".
                                                                "<td class='pub-Fax' align='left'>".$row["Fax"]."</td>".
                                                                "<td class='pub-CelCorp' align='left'>".$row["CelCorp"]."</td>".
                                                                "<td class='pub-Nacionalidad' align='left'>".$row["Nacionalidad"]."</td>".
                                                                "<td class='pub-UV' align='left'>".$row["UV"]."</td>".
                                                                "<td class='pub-Manzano' align='left'>".$row["Manzano"]."</td>".
                                                                "<td class='pub-Nro' align='left'>".$row["Nro"]."</td>".
                                                                "<td class='pub-CorreoCorp' align='left'>".$row["CorreoCorp"]."</td>".
                                                                "<td class='pub-Web' align='left'>".$row["Web"]."</td>".
                                                                "<td class='pub-Direccion' align='left'>".$row["Direccion"]."</td></tr> \n";
                                                                
                                                                /*"<td class='pub-funciones' align='left'>"."<span style='border:1px solid blue' class='btn-modif-publicidad'>Modificar</span> - <span style='border:1px solid red' class='btn-elim-publicidad'>Eliminar </span>"."</td></tr> \n";*/
                                                                
                                                                $NumItem++;
                                                            } 
                                                            while ($row = mysql_fetch_array($result)); 
                                                            echo "</table> \n"; 
                                                        } 
                                                        else 
                                                        { 
                                                            echo "No se ha encontrado ningún registro!!!"; 
                                                        } 
                                                    ?>
                                                </div>
                                               
                                                <div id="DivFooterRow" style="overflow:hidden">
                                                </div>
                                            </div>


Esa es mi tabla, carga súper, pero no se logra ver bien, lo de malo es que se estira en toda la pantalla hasta cargar todo lo que necesito, donde yo quiero que cargue pero manteniéndose un solo tamaño, que sea el tamaño con un tamaño máximo

Le dejo adjunto mi código para que me puedan ayudar

Código: [Seleccionar]

<div class="side-widget p-news">
                            <ul>
                                <h5><span><strong>TUS EMPRESA(S) REGISTRADA(S)</strong></span></h5>
                            </ul>
                            <ul>
                                <table width="40%" border="2" bgcolor="#000000">
                                    <tr>
                                        <td>
                                            BUSCAR:
                                            <label for="select"></label>
                                                <select name="select" id="select">
                                            </select>
                                            <input name="txtbuscar" type="text" id="txtbuscar" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                        <div id="DivRoot" align="left">
                                                <div style="overflow: hidden;" id="DivHeaderRow">
                                                </div>
                                                <div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
<?php //E8C970
                                                        $NumItem = 1;
                                                        $result = mysql_query("SELECT ID_Empresa, NombreEmpresa, Acronimo, RazonSocial, NitRut, Rubro, Ciudad, Telefono, Fax, CelCorp, Nacionalidad, UV, Manzano, Nro, CorreoCorp, Web, Direccion FROM tbl_Empresa WHERE Estado = 1 AND ID_Cliente = $ID_Cliente", $Conexion); 
                                                        if ($row = mysql_fetch_array($result))
                                                        { 
                                                            echo "<table width=50% border = '1' bgcolor='#00FFFF'> \n"; 
                                                            echo "<tr align='center'>
                                                                <td><b>ITEM</b></td>
                                                                <td><b>NOMBRE DE LA EMPRESA</b></td>
                                                                <td><b>ACRONIMO</b></td>
                                                                <td><b>RAZON SOCIAL</b></td>
                                                                <td><b>NIT / RUT</b></td>
                                                                <td><b>RUBRO</b></td>
                                                                <td><b>CIUDAD</b></td>
                                                                <td><b>TELEFONO</b></td>
                                                                <td><b>FAX</b></td>
                                                                <td><b>NUMERO COORPORATIVO</b></td>
                                                                <td><b>NACIONALIDAD</b></td>
                                                                <td><b>UV</b></td>
                                                                <td><b>MANZANO</b></td>
                                                                <td><b>NRO.</b></td>
                                                                <td><b>CORREO COORPORATIVO</b></td>
                                                                <td><b>WEB</b></td>
                                                                <td><b>DIRECCION</b></td>
                                                                </tr> \n"; 
                                                            do
                                                            { 
                                                                echo
                                                                "<tr>
                                                                <td align='right'> <input type='hidden' class='paq-pub-id' value = ".$row["ID_Empresa"]." /> ".
                                                                $NumItem."</td>".
                                                                "<td class='pub-NombreEmpresa' align='left'>".$row["NombreEmpresa"]."</td>".
                                                                "<td class='pub-Acronimo' align='left'>".$row["Acronimo"]."</td>".
                                                                "<td class='pub-RazonSocial' align='left'>".$row["RazonSocial"]."</td>".
                                                                "<td class='pub-NitRut' align='left'>".$row["NitRut"]."</td>".
                                                                "<td class='pub-Rubro' align='left'>".$row["Rubro"]."</td>".
                                                                "<td class='pub-Ciudad' align='left'>".$row["Ciudad"]."</td>".
                                                                "<td class='pub-Telefono' align='left'>".$row["Telefono"]."</td>".
                                                                "<td class='pub-Fax' align='left'>".$row["Fax"]."</td>".
                                                                "<td class='pub-CelCorp' align='left'>".$row["CelCorp"]."</td>".
                                                                "<td class='pub-Nacionalidad' align='left'>".$row["Nacionalidad"]."</td>".
                                                                "<td class='pub-UV' align='left'>".$row["UV"]."</td>".
                                                                "<td class='pub-Manzano' align='left'>".$row["Manzano"]."</td>".
                                                                "<td class='pub-Nro' align='left'>".$row["Nro"]."</td>".
                                                                "<td class='pub-CorreoCorp' align='left'>".$row["CorreoCorp"]."</td>".
                                                                "<td class='pub-Web' align='left'>".$row["Web"]."</td>".
                                                                "<td class='pub-Direccion' align='left'>".$row["Direccion"]."</td></tr> \n";
                                                                
                                                                /*"<td class='pub-funciones' align='left'>"."<span style='border:1px solid blue' class='btn-modif-publicidad'>Modificar</span> - <span style='border:1px solid red' class='btn-elim-publicidad'>Eliminar </span>"."</td></tr> \n";*/
                                                                
                                                                $NumItem++;
                                                            } 
                                                            while ($row = mysql_fetch_array($result)); 
                                                            echo "</table> \n"; 
                                                        } 
                                                        else 
                                                        { 
                                                            echo "No se ha encontrado ningún registro!!!"; 
                                                        } 
                                                    ?>
                                                </div>
                                               
                                                <div id="DivFooterRow" style="overflow:hidden">
                                                </div>
                                            </div>
                                        </td>
                                    </tr> 
                                </table>
                            </ul>
                        </div>

Espero su ayuda estimados amigos...

Título: Re:como hacer una tabla d un tamaño fijo con scroll
Publicado por: DRANXZ88 en 27 de Agosto 2016, 04:05

Eso lo podes hace con css; para eso tenes que poner un id a tu tabla seria algo así id="ejemplo"

Y el código css.

Código: [Seleccionar]

#ejemplo{
     overflow:scroll;
     height:200px;
     width:500px;
}
Los valores los puedes modificar para adaptarlos a tu medida.