Autor Tema: Cómo hacer una tabla HTML de tamaño fijo con scroll si los datos exceden tamaño  (Leído 12787 veces)

ing_jp

  • Sin experiencia
  • *
  • Mensajes: 21
    • Ver Perfil
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...
« Última modificación: 29 de Agosto 2016, 22:08 por Ogramar »

DRANXZ88

  • Avanzado
  • ****
  • Mensajes: 356
    • Ver Perfil
Re:como hacer una tabla d un tamaño fijo con scroll
« Respuesta #1 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.
« Última modificación: 29 de Agosto 2016, 22:09 por Ogramar »

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".