Affiliate Product Table Maker For Affiliate Website

COPY CSS

/* Affiliate Product Box */
.sb-pro-table {
  margin: 30px 0;
}
.sb-pro-table thead {
  background: #424242;
  color: #fff;
}
.sb-pro-table,
.sb-pro-table td,
.sb-pro-table th {
  border: none;
  box-sizing: border-box;
}
.sb-pro-table thead th {
  font-weight: 300;
  font-size: 17px;
  padding: 10px;
  margin: 0;
}
.sb-pro-table tr {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  transition: 0.3s;
}
.sb-pro-table tbody tr:hover {
  transform: scale(1.02);
  transition: 0.3s;
  box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
}
.sb-pro-table tbody tr {
  border: 2px solid #e1e1e1;
  margin-bottom: 5px;
}
.sb-pro-table tr td:first-child,
.sb-pro-table tr th:first-child {
  width: 25%;
}
.sb-pro-table tr td:nth-child(2),
.sb-pro-table tr th:nth-child(2) {
  width: 25%;
}
.sb-pro-table tr td:nth-child(3),
.sb-pro-table tr th:nth-child(3) {
  width: 30%;
}
.sb-pro-table tr td:last-child,
.sb-pro-table tr th:last-child {
  width: 20%;
}
.sb-pro-table .sb-image {
  position: relative;
}
.sb-pro-table .p_tag {
  position: absolute;
  left: -10px;
  top: 0;
  background: #5898ff;
  padding: 5px 5px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}
.sb-pro-table .p_tag::after {
  content: ' ';
  display: block;
  position: absolute;
  left: -10px;
  bottom: -7px;
  border-color: rgba(0, 0, 0, 0) #133091 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border-style: inset solid inset inset;
  border-width: 0 10px 7px;
}

.sb-pro-table .p-img {
  width: 90%;
  max-height: 140px;
  margin: 0 auto;
  display: block;
  height: auto;
  object-fit: contain;
}
.sb-pro-table .sb-product .p_title {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  color: #4b77b7;
}
.sb-pro-table .sb-btn a {
  background: #ef651e;
  text-transform: capitalize;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  display: block;
  text-align: center;
  transition: 0.3s;
}
.sb-pro-table .sb-btn a:hover {
  background: #000;
  transition: 0.3s;
}
.sb-pro-table .sb-feature {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
@media only screen and (max-width: 768px) {
  .sb-pro-table .p_tag {
    position: absolute;
    left: -20px;
  }
  .sb-pro-table tbody tr {
    padding: 10px;
  }
  .sb-pro-table tr td:first-child {
    width: 40%;
  }
  .sb-pro-table tr td:nth-child(2) {
    width: 60%;
  }
  .sb-pro-table tr td:nth-child(3),
  .sb-pro-table tr th:nth-child(3) {
    width: 100%;
  }
  .sb-pro-table tr td:last-child,
  .sb-pro-table tr th:last-child {
    width: 100%;
  }
  .sb-pro-table .sb-btn a {
    margin-top: 20px;
  }
  .sb-pro-table tr th:nth-child(2) {
    width: 100%;
  }
  .sb-pro-table tr th:first-child,
  .sb-pro-table tr th:nth-child(3),
  .sb-pro-table tr th:last-child {
    display: none;
  }
}

/* End Affiliate Product Box */

Pros

Product Name

Product Tag

Product Description

Product Image Link

Product Link

Image	Product	Feature	Price
Top Pick	Hp Laptop Demo Model 1101 - 8GB Ram	Lorem ipsum dolor sit amet consectetur adipisicing elit.Nemo reprehenderit expedita, porro tempora, illo,voluptate provident facere hic.	Check On Amazon

Pros

Want Your Custom Design or Tools?

Have any new ideas or suggestions for us?

Facing any issue or tools not working?