td, th {
    overflow: hidden;
    word-wrap:break-word;
    text-align: left;
}
table {
   width:100%;
   table-layout:fixed;
}
th {
  font-weight: bold;
}
td, th {
  border: 1px solid #ccc;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
   color: #fff !important;
}
.dataTables_wrapper .dataTables_length {
   color: #fff !important;
}
.dataTables_wrapper .dataTables_filter {
   color: #fff !important;
   margin-bottom: 20px;
}
.dataTables_wrapper .dataTables_info {
   color: #fff !important;
}
th {
  font-weight: bold;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  /* Force table to not be like tables anymore */
  table.dataTable {
    height: 100%;
  }
  input[type="search" i] {
    -webkit-appearance: searchfield;
    background-color: ghostwhite;
  }
  table, thead, tbody, th, td, tr {
    display: block;
    border: none;
  }
  td, tr{
    border: none;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    /* Behave  like a "row" */
    height: 30px;
    word-wrap:break-word;
  }

  td:before {
    /* Now like a table header */
    font-weight: bold;
  }

  /*
  Label the data
  */
  td:nth-of-type(1):before { content: "Receiver_ID: "; }
  td:nth-of-type(2):before { content: "Receiver_Refcode: "; }
  td:nth-of-type(3):before { content: "Chips: "; }
  td:nth-of-type(4):before { content: "Type: "; }
  td:nth-of-type(5):before { content: "Time: "; }
  td:nth-of-type(6):before { content: "Comments: "; }
}