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 when viewing individual orders is horrible. I would like to keep this table as it was before adding the CSS code.

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

The table of all orders is also 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?

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

Thanks