CODEWITHSUNDEEP
htmlcsshtml-tableresponsive
tall.dragoons
tall.dragoons

Reputation: 31

How to make my table collapse by row in mobile view

I'm trying to add a responsive table to an iframe in my website. The table looks good in desktop but not in mobile view. I have tried the @media to make the table collapse by row so that the first cell of each row will become vertically aligned in one column.

|-------------------------------------------------|
|    row head1      | data1 |              data2  |
|-------------------------------------------------| <--my table 
|    row head2      | data3 |              data4  |


|--------------------|
|    row head1       |    <- i want to have this in mobile view
|--------------------|
|    data1           |
|--------------------|
|    data2           |
|--------------------|
|    row head2       |
|--------------------|
|    data3           |
|--------------------|
|    data4           |
|--------------------|

Anything I did wrong in the following?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ffffff;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-cxkv{background-color:#ffffff}
.tg .tg-bsv2{background-color:#efefef}
.tg .tg-3we0{background-color:#ffffff;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
@media all and (max-width: 479px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block	;

	
	
  }
</style>
<div class="tg-wrap"><table class="tg" style="width: 100%;" >
<colgroup>
<col style="width: 110px">
<col style="width: 108px">
<col style="width: 418px">
<col style="width: 578px">
</colgroup>
  <tr>
    <td class="tg-iwtr" rowspan="2">04/08/2017</th>
    <td class="tg-bsv2">11:00 – 12:30</th>
    <td class="tg-bsv2">data</th>
    <td class="tg-yzt1">data</th>
  </tr>
  <tr>
    <td class="tg-cxkv">15:00 – 17:00</td>
    <td class="tg-cxkv">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr">05/08/2017</td>
    <td class="tg-yzt1">11:00 – 12:30</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr" rowspan="2">06/08/2017</td>
    <td class="tg-3we0">15:00 – 16:30</td>
    <td class="tg-3we0">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-yzt1">16:30 – 18:00</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr" rowspan="2">07/08/2017</td>
    <td class="tg-3we0">15:00 – 16:30</td>
    <td class="tg-3we0">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-yzt1">16:30 – 18:00</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
</table></div>

Upvotes: 3

Views: 10900

Answers (1)

Lars
Lars

Reputation: 3573

The Css Looks fine to me. note that in the HTML you're opening a <td> but closing a </th>. 

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ffffff;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}
.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-cxkv{background-color:#ffffff}
.tg .tg-bsv2{background-color:#efefef}
.tg .tg-3we0{background-color:#ffffff;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
@media all and (max-width: 479px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block	;

	
	
  }
</style>
<div class="tg-wrap"><table class="tg" style="width: 100%;" >
<colgroup>
<col style="width: 110px">
<col style="width: 108px">
<col style="width: 418px">
<col style="width: 578px">
</colgroup>
  <tr>
    <th class="tg-iwtr" rowspan="2">04/08/2017</th>
    <th class="tg-bsv2">11:00 – 12:30</th>
    <th class="tg-bsv2">data</th>
    <th class="tg-yzt1">data</th>
  </tr>
  <tr>
    <td class="tg-cxkv">15:00 – 17:00</td>
    <td class="tg-cxkv">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr">05/08/2017</td>
    <td class="tg-yzt1">11:00 – 12:30</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr" rowspan="2">06/08/2017</td>
    <td class="tg-3we0">15:00 – 16:30</td>
    <td class="tg-3we0">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-yzt1">16:30 – 18:00</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
  <tr>
    <td class="tg-iwtr" rowspan="2">07/08/2017</td>
    <td class="tg-3we0">15:00 – 16:30</td>
    <td class="tg-3we0">data</td>
    <td class="tg-3we0">data</td>
  </tr>
  <tr>
    <td class="tg-yzt1">16:30 – 18:00</td>
    <td class="tg-yzt1">data</td>
    <td class="tg-yzt1">data</td>
  </tr>
</table></div>

Upvotes: 5

Related Questions