table {
  /*  border: 1px solid #ccc;*/
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

    table tr {
        /*border: 1px solid #ddd;*/
        padding: 5px;
    }

    table th,
    table td {
        padding: 10px;
        text-align: center;
    }

    table th {
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
    }

@media screen and (max-width: 600px) {
    table {
        border: 0;
    }

        table thead {
            display: none;
        }

        table tr {
            margin-bottom: 10px;
            display: block;
            border-bottom: 2px solid #ddd;
        }

        table td {
            display: block;
            text-align: right;
            font-size: 13px;
            border-bottom: 1px dotted #ccc;
        }

            table td:last-child {
                border-bottom: 0;
            }

            table td:before {
                content: attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }



        /*table td {
            text-align: center;*/ /*Aligns all content of td elements to center*/
        /*}

            table td a {
                display: inline-block;*/ /*Behaves like a div, but can be placed inline*/
                /*width: 90%;*/ /*Full width of parent*/
                /*height: 90%;*/ /*Full height of parent*/
                /*text-align: center;*/ /*Centers content*/
            /*}*/


    /*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
    .btn {
        color: #fff;
        background-color: #0495c9;
        border-color: #357ebd; /*set the color you want here*/
    }

        .btn:hover, .btn:focus, .btn:active, .btn.active, .open > .dropdown-toggle.btn {
            color: #fff;
            background-color: #00b3db;
            border-color: #285e8e; /*set the color you want here*/
        }