.respo-table {
    display: block;
}

.respo-table * {
    box-sizing:border-box;
}
.respo-table table {
    width: 100%;
}

.respo-table table,
.respo-table td,
.respo-table tr,
.respo-table th {
    border-bottom: 2px solid black;
    border-collapse: collapse;
    text-align: center;
}

.respo-table td,
.respo-table tr,
.respo-table th {
    padding: 0.5em;
}

.respo-table th {
    background:#eee;
    font-weight: bold;
}

.respo-table tr:hover {
    background-color: #A4A4A4;
}

@media screen and (max-width:700px) {

.respo-table table,
.respo-table tr,
.respo-table td {
    padding:0;
    border:1px solid black;
}

.respo-table table {
    border:none;
}

.respo-table thead {
    display:none;
}

.respo-table tr {
    float: left;
    width: 100%;
    margin-bottom: 2em;
}

.respo-table td {
    float: left;
    width: 100%;
    padding:1em !important;
}

.respo-table td::before {
    content:attr(data-label);
    word-wrap: break-word;
    background: #eee;
    border-right:2px solid black;
    width: 20%;
    float: left;
    padding: 1em;
    font-weight: bold;
    margin: -1em 1em -1em -1em;
}
}