table.dynamic {
        border-collapse: collapse;
        padding: 0;
        margin: 0 0 11px 0;
        width: 100%;
    }

 table.dynamic th {
        text-align: left;
        border-bottom: 2px solid #eee;
        vertical-align: bottom;
        padding: 0 10px 10px 10px;
        text-align: right;
    }

 table.dynamic td {
        border-bottom: 1px solid #eee;
        vertical-align: top;
        padding: 10px;
        text-align: right;
    }

 table.dynamic th:nth-child(1),
     table.dynamic td:nth-child(1) {
        text-align: left;
        padding-left: 0;
        font-weight: bold;
    }
/* responsive table */
@media screen and (max-width: 480px) {
 table.dynamic,
    tbody.dynamic {
        display: block;
        width: 100%;
    }
 thead.dynamic { display: none; }
 table.dynamic tr,
    table.dynamic th,
    table.dynamic td {
        display: block;
        padding: 0;
        text-align: left;
        white-space: normal;
    }

 table.dynamic tr {
        border-bottom: 1px solid #eee;
        padding-bottom: 11px;
        margin-bottom: 11px;
    }
 table.dynamic th[data-title]:before,
    table.dynamic td[data-title]:before {
        content: attr(data-title) ":\00A0";
        font-weight: bold;
    }

 table.dynamic td {
        border: none;
        margin-bottom: 6px;
        color: #444;
    }
 table.dynamic td:empty { display: none; }

 table.dynamic td:first-child {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 6px;
        color: #333;
    }
 table.dynamic td:first-child:before { content: ''; }

}