Q:

¿Cómo cambiar el color de borde y celdas de un jtable?

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):

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.

Espero que alguien pueda apoyarme. Muchísimas gracias.

A:

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.

