0

Tengo un jtable, el formato se muestra tal cual por default, quisiera cambiar el color de los bordes y celdas de éstos. Así es como se muestra(pretendo lograr cambiar el color rojo):

introducir la descripción de la imagen aquí

Les dejo los fragmentos de mi código.

CSS

           #tabla {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    #tabla td, #tabla th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #tabla tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #tabla tr:hover {
        background-color: #ddd;
    }

    #tabla th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #FF8000; /*#4CAF50;*/
        color: white;
    } 

Funciones

        <div class="box-body" id="grid-busca">
        </div>

  ////////////
 $(document).ready(function () {
    $("#TXTInicioCarga").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#TXTFinCarga").datepicker({ dateFormat: 'yy-mm-dd' });

    $('#grid-busca').jtable({

        paging: true,
        pageSize: 10,
        tableId: 'ubicTable',
        selecting: false, //Enable selecting
        multiselect: true, //Allow multiple selecting
        selectingCheckboxes: false, //Show checkboxes on first column
        selectOnRowClick: true,
        saveUserPreferences: false,
         fields: {

            ubicacion: {
                title: '',
                width: '5%',
                sorting: false,
                edit: false,
                create: false,
                display: function (locData) {
                    //Create an image that will be used to open child table
                    var $img = $('<img src="//Images/agregar-editar.png" title="Detalle" />');
                   }

            },

            location_id: {
                key: true,
                title: 'Ubicación',
                create: true,
                width: '10%',
                edit: true,
                list: true, input: function (data) {
                    if (data.record) {
                        return '<textarea name="ubicacion"  readonly style="width:200px; text-transform:uppercase" >' + data.record.ubicacion+ '</textarea>';
                    } else {
                        return '<textarea  name="ubicacion" style="width:300px;;text-transform:uppercase" placeholder="Ubicacion"   />' + "Otro" + '</textarea>';
                    }
                }
            },
           selectionChanged: function () {
            //Get all selected rows
            var $selectedRows = $('#grid-busca').jtable('selectedRows');
        }
    });//end jtable       

Éste es el código generado del jtable.

introducir la descripción de la imagen aquí

Espero que alguien pueda apoyarme. Muchísimas gracias.

7
  • Podrías poner un ejemplo que genere la tabla que tienes actualmente, se me ocurre es que agregar estilos css una vez que la tabla ya se haya generado Commented el 29 ene. 2018 a las 18:31
  • Hola @AlejandroGonzalez mi código está demasiado largo pero ya modifiqué mi publicación, con lo necesario, gracias. ¿Los estilos no deberían ser definidos cuando se crea? algo así como class = "box-primary" (a la clase css con el formato para cambiar el color de los bordes y celdas), no soy experta en css. :( por eso requiero ésta ayuda
    – masha10
    Commented el 29 ene. 2018 a las 18:44
  • solo una cosa mas, puedes poner el html que te genera una vez que se crea la tabla, para probar si con unos ajustes de css se puede arreglar Commented el 29 ene. 2018 a las 18:47
  • @AlejandroGonzalez ya modifiqué nuevamente mi pregunta, gracias
    – masha10
    Commented el 29 ene. 2018 a las 18:53
  • has intentado, crear un estilo?, por ejemplo : #ubicTable {border:1px solid red} Commented el 29 ene. 2018 a las 18:57

1 respuesta 1

1

Con estos estilos debería quedar como lo necesitas:

div#grid-busca table thead th{ 
background:#ff8000 !important; 
color:#fff !important; 
border:1px solid #ff8000 !important 
} 
div#grid-busca table tbody td{ 
background:#ff8000 !important; 
color:#fff !important; 
border:1px solid #ff8000 !important 
}

div#grid-busca .jtable-bottom-panel{ 
background:#ff8000 !important; 
border:1px solid #ff8000 !important 
}


.jtable-page-list span{ 
background:#ff8000 !important; 
color:#fff !important 
}

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.