.table-wrapper h3{ padding: 7px 40px; background: #004f9f; box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; /* box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */ color: #ffffff; margin: 20px 0; font-size: 20px; width: 50%; } .table-wrapper th{ color:black; } .table-wrapper .btn{ color: var(--bs-btn-hover-color); background-color: #004f9f; border-color: #000000;    padding: 10px 40px; } @media only screen and (max-width: 767px){ tbody{ display: flex !important; flex-direction: column-reverse !important; } tr th{ display:none; } .td-price active p{ text-align:center; } .ded-server-table .arw{ display:none; } } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } .table-wrapper h3{ width:100%; } .ded-server-table .table td:first-child { margin-top: 20px; } .servertable .table td:nth-of-type(1):before { content: "Server Type : "; } .servertable .table td:nth-of-type(2):before { content: "RAM : "; } .servertable .table td:nth-of-type(3):before { content: "Disk Size : "; } .servertable .table td:nth-of-type(4):before { content: "Traffic : "; } .servertable .table td:nth-of-type(5):before { content: "Price/month : "; } .td-price active:before { content: " " !important; } } table { table-layout: fixed; } table th, table td { overflow: auto; }