Table Responsive

Wrap data to be organized

by ybombale

HTML

<div class='div-table'>
<div class='mytablecontainer table1'>
<table id='mytable'>
<tbody>
<tr>
<td><i class='fas fa-users'></i> 1.1 guests</td>
<td><i class='fas fa-sign-in-alt'></i> 1.2 rooms</td>
</tr>
</tbody>
</table>
</div>
<div class='mytablecontainer table2'>
<table id='mytable'>
<tbody>
<tr>
<td><i class='fas fa-bed'></i> 2.1 beds</td>
<td><i class='fas fa-bath'></i> 2.2 bathrooms</td>
</tr>
</tbody>
</table>
</div>
</div>

CSS

/* My Default Content/Tables in WordPress Post Editor CSS */
.div-table {
	overflow: auto;
}
.mytablecontainer {
    float: left;
    margin-bottom: 0;
}
.mytablecontainer #mytable{
    margin-bottom: 0;
}
#mytable tbody {
}
#mytable td {
    min-width: 140px;
    border: 1px solid #ccc;
}
#mytable th {

}
#mytable tr {
}
.div-table  table, td, th {
	/* border-width: 0; */
}

@media all and (max-width:600px) {
  .mytablecontainer table, thead, tbody, th, td, tr {
    display: block;
  }
  .table1{
    float: left;
    width:50%;
  }
  .table2{
    float: right;
    width:50%;
  }
}

@media all and (max-width:300px) {
  .mytablecontainer table, thead, tbody, th, td, tr {
    display: block;
    text-align:center;
  }
  .table1{
    float: left;
    width:100%;
  }
  .table2{
    float: left;
    width:100%;
  }
}