如何使用Bootstrap4为手机制作合适的表

Question

我正在尝试创建一个表格，其<td>出现在手机的<th>的正下方。当前，它有几个<td>彼此堆叠，但它们之间没有<td>。是五个<th>堆叠在一起，然后是五个<td>堆叠在下面。我想在标题下方显示手机中的数据。有人可以帮忙吗？您的反馈将有所帮助。

confirmation.html

<table class="table table-hover table-bordered table-responsiveness">
                <thead class="thead-light">
                    <tr class="text-center">
                        <th scope="col">Venue</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Ticket Price</th>
                        <th scope="col">Hearing Loop</th>
                        <th scope="col">Total Price</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ticket in tickets %}
                    <tr class="text-center">
                        <th scope="row">{{ticket.venue}}</th>
                            <td>{{ticket.quantity}}</td>
                            <td>$25.00 each</td>
                            <td>{{ticket.loop}}</td>
                            <td>${{ticket.total | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-right">Sales Tax</th>
                        <td class="text-center">${{ticket.tax | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-right">Total</span></th>
                        <td class="text-center">${{ticket.total_price | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <td><a href="/edit/{{ticket.id}}" class="btn btn-primary">Edit</a><a href="/delete/{{ticket.id}}" class="float-right btn btn-danger">Delete</a></td>
                        <td colspan="4"><a href="/payment" class="float-right btn btn-success">Checkout</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

styles.css

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

    /* Force table to not be like tables anymore */
    table, 
    thead, 
    tbody, 
    th, 
    td, 
    tr { 
        display: block; 
    }


    tr { border: 2px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;

    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }



}