table.table-info {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table.table-info caption {
  font-size: 1.5em;
}
table.table-info tr {
  background: #fff;
  border: 1px solid #ddd;
}
table.table-info th,
table.table-info td {
  text-align: center;
  padding: 5px !important;
}
table.table-info th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  table.table-info {
    border: 0;
  }
  table.table-info caption {
    font-size: 1.3em;
  }
  table.table-info thead {

    word-wrap: break-word;

  }
  table.table-info tr {
    border-bottom: 3px solid #ddd;
    background-color: #fff;
  }
  table.table-info td {
    border-bottom: 1px solid #eee;
  }
  table.table-info td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    /*text-transform: uppercase;*/
  }
  table.table-info td:last-child {
    border-bottom: 0;
  }

.table-striped>tbody>tr:nth-of-type(odd){
  background-color: #f1fbfb !important;
}

}