• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.
  • Support reminder: Please do not use private messaging for product support. Post questions to the respective forums to get help.

Simple CSS that I use to make Tables Responsive

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
I use this CSS to make HTML tables (specially Table Block in Gutenberg) Responsive:
CSS:
@media (max-width:900px){
table tr {
    display: grid;
}

table td, table th{
    text-align: center!important;
}

table thead {display: none;} /* Optional */

table tr td:first-child {
    background: #aff2fa;
    font-weight: 700;
}

.buttons table a, .has-buttons table a {
    /* I use .buttons/.has-buttons classes to convert all links in the table to buttons*/
    display: block;
}
}
 
Top