Mobile Responsive Table that Collapse-CodePudding

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

<div >
<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;" >
  <tr>
        <td> <i ></i> Waterproof</td>
        <td> <i ></i> Certified Vegan</td>
  </tr>
  <tr>
        <td> <i ></i> Natural Rubber</td>
        <td> <i ></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!

CodePudding user response：

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 >
  <div >
    <div >
      <div >Waterproof</div>
      <div >Certified Vegan</div>
    </div>
    <div >
      <div >Natural Rubber</div>
      <div >Light Weight</div>
    </div>
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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 }