Tablas: Cabeceras colores y estilos

  1. Inicio

CATÁLOGO: MATERIAS

 Buscar
NºCÓDIGO DE MATERIANOMBRE DE MATERIACATEGORÍACAMPOS DE FORMACIÓNTIPO DE ASIGNATURAHORAS SEMESTREOPCIONES
1 TAO434ABASTECIMIENTO DE AGUA FORMACION PROFESIONAL   OBLIGATORIA 4.00
2 TAS424ABASTECIMIENTO DE AGUA   FORMACION EPISTEMOLOGICA OBLIGATORIAS 2.00
3 CB505 ABASTECIMIENTO DE AGUA POTABLE FUNDAMENTALES   CARRERA 3.00
4 CH744 ABASTECIMIENTO DE AGUA POTABLE OBLIGATORIAS  CARRERA 3.00
5 AGR582ABONOS Y FERTILIZANTES   FORMACION EPISTEMOLOGICA OBLIGATORIAS 1.00

Tabla Primaria

 

Color de borde

/* TABLA PRIMARIA: borde */
.panel-primary {
    border-color: #fff!important;
}

color background y del borde

/* TABLA PRIMARIA TITULO: borde y background */
.panelTitle {
    background-color: #5A6E82!important;
    border-color: #5A6E82!important;
}

Tabla Primaria: Botones

 

Estilo botón guardar

/* BOTON GUARDAR */
<div id="div8" class="form-group col-xs-12 col-sm-6 col-md-4">
	<a id="ContentPlaceHolder1_BtNew" class="btn btn-primary"
	    href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$BtNew','')" 
	    style="display:inline-block;width:100%;">
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Nuevo
	</a>               
</div>

Estructura botón cancelar

/* BOTON CANCELAR */
<div id="div9" class=" form-group col-xs-12 col-sm-6 col-md-4">
	<button type="button" style="width: 100%;" class="btn btn-primary" 
	onclick="cerrarSalirdePantalla('CatologoGeneralMaterias.aspx');">
	<i class="fa fa-ban" aria-hidden="true"></i>&nbsp;Cancelar
	</button>
</div>

Tabla Secundaria

 

Color background y sombra de títulos

/* TABLA SECUNDARIA TITULO CAMPOS: color, background y sombra */
.footable > thead > tr > th, 
.footable > thead > tr > td {
    background-color: #5A6E82!important;
    background-image: linear-gradient(to bottom,#30BBBB,#5A6E82)!important;
    text-shadow: 0 1px 0 rgba(14, 14, 14, 0.5)!important;
}

Alineación títulos de tablas

/* TABLA SECUNDARIA TITULO CAMPOS: alineacion texto */            
.footable > thead > tr > th{
    text-align:center!important;
    font-size: 12px!important;
}

Tabla Secundaria: Numerador

 

Contador en negrilla

    <td class="clsNumeros"><strong>1</strong></td>

Contador en negrilla

/* NUEVO ESTILO */
td.clsNumeros{
    text-align:center!important;
}

Tabla Secundaria: Paginador

 

Estilo y Estructura

<div class="dataTables_paginate paging_simple_numbers pagination pagination-sm no-margin pull-right">
    <ul class="pagination">
        <li class="paginate_button previous disabled" id="example2_previous"><a href="#"><</a></li>
        <li class="paginate_button active"><span>1</span></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$2')">2</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$3')">3</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$4')">4</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$5')">5</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$6')">6</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$7')">7</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$8')">8</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$9')">9</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$10')">10</a></li>
        <li><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Page$11')">...</a></li>
        <li><a href="#">></a></li>
    </ul>						
</div>