table.responsive-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

table.responsive-table th,
table.responsive-table td {
  padding: 10px !important;
  text-align: left !important;
  vertical-align: top !important;
}

table.responsive-table thead th {
  background: #dddddd !important;
}

table.responsive-table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

table.responsive-table tbody tr:nth-child(even) {
  background-color: #f5f5f5 !important;
}

table.responsive-table a {
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 600px) {
  table.responsive-table,
  table.responsive-table thead,
  table.responsive-table tbody,
  table.responsive-table th,
  table.responsive-table td,
  table.responsive-table tr {
    display: block;
    width: 100%;
  }

  table.responsive-table thead {
    display: none;
  }

  table.responsive-table tr {
    margin-bottom: 12px;
    border: 1px solid #ddd;
  }

  table.responsive-table td {
    border: none;
    padding: 8px 10px !important;
  }

  table.responsive-table td::before {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
  }

  table.responsive-table td:nth-child(1)::before { content: "Role"; }
  table.responsive-table td:nth-child(2)::before { content: "Name"; }
  table.responsive-table td:nth-child(3)::before { content: "Contact"; }
}