OceanWP + WooCommerce My Account mobile responsiveness issues

Hi,

OceanWP causes issues with mobile responsiveness on the WooCommerce My Account page, the “Orders” section in particular.

I have found your article: https://docs.oceanwp.org/article/596-make-order-and-download-section-responsive-under-my-account-page

I have added the CCS code presented in the article:

@media screen and (max-width: 767px) {
.woocommerce table.shop_table thead {
    display: none;
}
.woocommerce table.shop_table td {
    display: block;
    text-align: right!important;
}
.woocommerce table.shop_table td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
}
}

However, there’s still some issues.

The table of all orders is very confusing. Is it possible to add a gap between each individual order? Or seperate each individual order with a thicker line? Or do anything to make it easier to understand the table? Take a look at the screenshots below:

With CSS: https://ibb.co/ry2Kvqy
Photoshopped (Gaps between orders): https://ibb.co/y06bZLf
Photoshopped (Thicker lines between orders): https://ibb.co/QFqnJvC

The CSS code also affects the individual order tables and the order table at checkout. I would like to keep these tables the same. Take a look at the screenshots below:

With CSS: https://ibb.co/0ytdSMz
Without CSS: https://ibb.co/FDDNkHK

Ideally, the CSS code only needs to affect the table of all orders in My Account > Orders, nothing else.

Looking forward to your response.

Thanks