CODEWITHSUNDEEP
htmlcss
Tony Choi
Tony Choi

Reputation: 13

Mobile Responsive Table that Collapse

I'm trying to add a table to my Shopify store, and current have the table setup as the following:

<div class="table-responsive">
<table style="width:100%; table-layout:fixed; border-collapse:separate !important;background-color: #f7f7f7; border-spacing:30px 5px; color:#333333; font-size:16px; line-height:12px; font-weight:100;" class="bodywrapcenter">
  <tr>
        <td> <i class="fa-solid fa-droplet"></i> Waterproof</td>
        <td> <i class="fa-solid fa-leaf"></i> Certified Vegan</td>
  </tr>
  <tr>
        <td> <i class="fa-solid fa-seedling"></i> Natural Rubber</td>
        <td> <i class="fa-solid fa-feather"></i> Light Weight</td>
  </tr>
</table></div>

However, I'm trying to make the following table show in one rows in mobile. (1 x 4 instead of 2 x 2 on mobile).

I tried adding the the following code for CSS:

.table.bodywrapcenter>tr>td {
    width: 100%;
    float: left;
}

however, It's still not working.

Can someone please help me? I'm a newbie so detailed instruction would be greatly appreciated.

Thanks in advance!

Upvotes: 1

Views: 1571

Answers (3)

moo nezam
moo nezam

Reputation: 31

.table-responsive.bodywrapcenter{
    display:flex,
    flex-wrap:wrap
}

Upvotes: 0

Toni Bordoy
Toni Bordoy

Reputation: 255

Perhaps you can do it just with <div> tags instead using table elements. If you can do it this way you can play with display: flex attribute and @mediaqueries to change the view depending on the viewport. I let you an example attached.

.bodywrapcenter {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  background-color: #f7f7f7;
  color: #333333;
  font-size: 16px;
  line-height: 12px;
  font-weight: 100;
}

.bodywrapcenter-tr {
    display: flex;
    flex-flow: row wrap;
    flex: 0 0 50%;
}

.bodywrapcenter-td {
  display: block;
}

@media only screen and (min-width: 768px) {
  .bodywrapcenter-tr {
    flex-flow: row wrap;
     justify-content: space-around;
  }
}
<div class="table-responsive">
  <div class="bodywrapcenter">
    <div class="bodywrapcenter-tr">
      <div class="bodywrapcenter-td">Waterproof</div>
      <div class="bodywrapcenter-td">Certified Vegan</div>
    </div>
    <div class="bodywrapcenter-tr">
      <div class="bodywrapcenter-td">Natural Rubber</div>
      <div class="bodywrapcenter-td">Light Weight</div>
    </div>
  </div>
</div>

Upvotes: 1

Hamid Asiabari
Hamid Asiabari

Reputation: 121

For the responsive design, you can use the below CSS and set your preferred style in different widths.

@media only screen and (max-width: 390px) { //your CSS code }

Upvotes: 0

Related Questions