How To Change Global (Cart Table, Data Table, Forum Table) Table CSS
.table-wrapper {
overflow-x: auto;
}
.data-table .hidden-row {
height: 1px;
border: none;
}
.data-table tr.hidden-row th {
padding: 0;
border-top: none;
}
.data-table tr.hidden-row th > span {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
.cart th,
.data-table th,
.forum-table th {
border-width: 1px 1px 0;
border-style: solid;
border-color: #ddd;
background-color: #f6f6f6;
padding: 10px;
white-space: nowrap;
font-weight: normal;
}
.forum-table th.replies,
.forum-table th.views,
.forum-table th.votes,
.forum-table th.latest-post,
.forum-table th.topics,
.forum-table th.posts,
.forum-table td.replies,
.forum-table td.views,
.forum-table td.votes,
.forum-table td.latest-post,
.forum-table td.topics,
.forum-table td.posts {
display: none;
}
.forum-table td.image {
min-width: 0;
}
.cart td,
.data-table td,
.forum-table td {
min-width: 50px;
border-width: 1px;
border-style: solid;
border-color: transparent #ddd #ddd;
background-color: #fff;
padding: 20px;
color: #444;
}
.forum-table td {
min-width: 90px;
padding: 10px;
}
.cart a,
.data-table a,
.forum-table a {
font-weight: normal;
color: #4ab2f1;
}
.cart a:hover,
.cart a:focus,
.data-table a:hover,
.data-table a:focus,
.forum-table a:hover,
.forum-table a:focus {
text-decoration: underline;
}
.cart .product,
.data-table .product,
.data-table .message,
.data-table .info,
.data-table .name {
min-width: 225px;
text-align: left;
}
.forum-table .forum-details,
.forum-table .topic-details {
text-align: left;
}
.cart .product a,
.data-table .product a,
.data-table .info a {
font-weight: bold;
color: #444;
}
.cart .product a:hover,
.cart .product a:focus,
.data-table .product a:hover,
.data-table .product a:focus,
.data-table .info a:hover,
.data-table .info a:focus {
color: #4ab2f1;
text-decoration: none;
}
.cart .product .edit-item {
margin: 10px 0 0;
}
.cart .product .edit-item a {
font-weight: normal;
color: #4ab2f1;
}
.cart .product .edit-item a:hover,
.cart .product .edit-item a:focus {
text-decoration: underline;
}
.cart .remove-from-cart,
.cart .add-to-cart,
.data-table .select-boxes,
.data-table .order {
text-align: center;
}
.cart .remove-from-cart input[type="checkbox"] {
display: none;
}
.cart .remove-from-cart .remove-btn {
width: 11px;
height: 11px;
border: 0;
background: #ffffffab url(../images/remove.png) center no-repeat;
}
.cart td.unit-price,
.data-table td.unit-price {
white-space: nowrap;
}
.cart td.quantity input {
width: 50px;
text-align: center;
}
.cart td.subtotal,
.data-table td.total {
white-space: nowrap;
color: #444;
}
.cart td.subtotal .discount, .cart td.subtotal .discount-additional-info {
font-style: italic;
color: #4ab2f1;
}
.data-table em a {
font-weight: bold;
color: #444;
}
.data-table div.download {
margin: 10px 0 0;
}
@media all and (max-width: 1000px) {
/*** GLOBAL TABLES ***/
.cart {
display: block;
}
.cart colgroup,
.cart thead {
display: none;
}
.cart tbody {
display: block;
overflow: hidden;
}
.cart tr {
display: block;
float: left;
width: 100%;
margin: 40px 0 0;
border: 1px solid #ddd;
}
.cart td {
display: block;
border: none;
padding: 10px;
}
.cart td.remove-from-cart {
margin: 0 0 15px;
border-bottom: 1px solid #ddd;
background-color: #eee;
padding: 10px;
}
.cart td.product-picture {
border-top: 1px solid #ddd;
padding: 15px 10px 5px;
}
.cart td.product {
min-width: 0;
border-bottom: 1px solid #ddd;
padding: 5px 10px 15px;
text-align: center;
}
.cart td.quantity {
display: inline-block;
padding: 0 10px;
vertical-align: middle;
}
.cart td.unit-price,
.cart td.subtotal {
display: inline-block;
padding: 20px 10px;
vertical-align: middle;
}
.order-details-page .data-table {
display: block;
}
.order-details-page .data-table colgroup,
.order-details-page .data-table thead {
display: none;
}
.order-details-page .data-table tbody {
display: block;
overflow: hidden;
}
.order-details-page .data-table tr {
display: block;
float: left;
width: 100%;
margin: 40px 0 0;
border: 1px solid #ddd;
}
.order-details-page .data-table td {
display: block;
border: none;
padding: 10px;
}
.order-details-page .data-table td.product,
.order-details-page .data-table td.tracking-number {
min-width: 0;
border-bottom: 1px solid #ddd;
padding: 5px 10px 15px;
text-align: center;
}
}
@media all and (min-width: 481px) {
/*** GLOBAL TABLES ***/
.cart tr {
width: 46%;
margin: 40px 2% 0;
}
.cart tr:nth-child(2n+1) {
clear: both;
}
.order-details-page .data-table tr {
width: 46%;
margin: 40px 2% 0;
}
.order-details-page .data-table tr:nth-child(2n+1) {
clear: both;
}
}
@media all and (min-width: 769px) {
/**** GLOBAL TABLES ***/
.cart tr {
width: 31.33333%;
margin: 40px 1% 0;
}
.cart tr:nth-child(2n+1) {
clear: none;
}
.cart tr:nth-child(3n+1) {
clear: both;
}
.order-details-page .data-table tr {
width: 31.33333%;
margin: 40px 1% 0;
}
.order-details-page .data-table tr:nth-child(2n+1) {
clear: none;
}
.order-details-page .data-table tr:nth-child(3n+1) {
clear: both;
}
}
@media all and (min-width: 1001px) {
/*** GLOBAL TABLES ***/
.cart tr {
width: auto;
margin: 0;
}
.cart label {
display: none;
}
.order-details-page .data-table tr {
width: auto;
margin: 0;
}
.order-details-page .data-table label {
display: none;
}
}
Modified at 2024-08-27 11:55:42