A basic html table constructed of divs that uses CSS to set the layout rather than table, cell, table-row markup.

Responsive Table.html

<!-- Table CSS -->

<style>
#resp-table {
width: 100%;
display: table;
}

#resp-table-caption{
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#resp-table-header{
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
}

.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
#resp-table-body{
display: table-row-group;
}
.resp-table-row{
display: table-row;
}

.table-body-cell{
display: table-cell;
}
</style>

<!-- Table HTML -->
<div id="resp-table">
    <div id="resp-table-caption">
        <div>Table Caption Text</div>
    </div>
    <div id="resp-table-header">
        <div class="table-header-cell">
            <div>Heading 1</div>
        </div>
        <div class="table-header-cell">
            <div>Heading 2</div>
        </div>
        <div class="table-header-cell">
            <div>Heading 3</div>
        </div>
        <div class="table-header-cell">
            <div>Heading 4</div>
        </div>
    </div>
    <div id="resp-table-body">
        <div id="resp-table-row" class="resp-table-row">
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
        </div>
        <div class="resp-table-row">
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
        </div>
        <div class="resp-table-row">
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
            <div class="table-body-cell">
                <div>Reprehenderit ex dolore quis reprehenderit id quis velit ex ut excepteur.</div>
            </div>
        </div>
    </div>
    <div id="resp-table-footer">
        <div class="table-footer-cell">
            <div>Footer 1</div>
        </div>
        <div class="table-footer-cell">
            <div>Footer 2</div>
        </div>
        <div class="table-footer-cell">
            <div>Footer 3</div>
        </div>
        <div class="table-footer-cell">
            <div>Footer 4</div>
        </div>
    </div>
</div>