This is the CSS code I wish to implement with our current table styling so it can apply to all tables on our website.
from this link you will be able to see the table
https://shorturl.at/65yne
/* table styling */
th{
border:none !important;
}
.table-bordered>:not(caption)>*{
border-color: lightsteelblue !important;
}
.table-responsive{
border-radius: 12px !important;
border: none !important;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
}
.table-compare .table > :not(caption) > > {
font-size: 1.1rem;
line-height: 23px;
padding: 1.5rem;
}
I tried to input this into the base.css file because the custom CSS sections in theme editors have a text limit. It's very strange—the code only works on screens 1200px and wider; it doesn't work on any screen smaller than that.
Note:
At around 800px, the table disappears and changes to an image, which is fine as I intended it that way.
