PrograBases: 18/07/2020 Inicio de la tercera parte (Web)

Se leyó junto al compañero el documento del proyecto numero 3 para confirmar todo los cambios que se deben realizar en la base de datos y en la parte web.
Se busco ejemplos estilos de css para tablas. Se encontró la siguiente pagina que cuenta con varios ejemplos:

Se investigo como limitar la el alto y ancho de la tabla para que esta no se salga de la pantalla y que cuente con un scrollbar.
Se hizo un cambio en el diseño de tabla que muestra propiedades. Ahora hay un div con estilo flexblox para contener otro div que contiene la tabla con las propiedades, y el div que tiene los inputs y el botón para actualizar las propiedades.

<asp:GridView>

</asp:GridView>

</div>

</div>

Esto permite que ambos div estén a lado, además como el div "divPropiedades" solo contiene la tabla se puede utilizar css para limitar su altura y evitar que la tabla se salga de pantalla.

#flexBoxPropiedadesContainer {

display: flex;

flex-direction: row;

margin-left: 11%;

height: 100%;

padding-top: 1%;

}

#divPropiedades {

width: 75%;

display: inline-block;

overflow-y: scroll;

max-height: 90%;

}

#ContentPlaceHolder1_GridPropiedades {

text-align: center;

margin: auto;

}

Este es el css que se utiliza actualmente para que la pagina luzca de la manera que se mencionó.

Se añadió una tabla sobre la tabla actual de propiedades, esto para mostrar en esta los nombres de las columnas, así al hacer scroll en la tabla de propiedades no se pierden de vista los nombres de las columnas.

<thead>

<th class="cell100 column1" style="width:14%">Numero de Finca</th>

<th class="cell100 column2" style="width:15%">Valor</th>

<th class="cell100 column3" style="width:25%">Direccion</th>

<th class="cell100 column4" style="width:10%">Propietarios</th>

<th class="cell100 column5" style="width:10%">Borrar</th>

</tr>

</thead>

</table>

Esta tabla contiene solo los nombres de las columnas, así como su atributo width, esto para que queden en posicion correcta.

PrograBases