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.