html - How to make my table collapse by row in mobile view -


i'm trying add responsive table iframe in website. table looks in desktop not in mobile view. have tried @media make table collapse row first cell of each row become vertically aligned in 1 column.

|-------------------------------------------------| |    row head1      | data1 |              data2  | |-------------------------------------------------| <--my table  |    row head2      | data3 |              data4  |   |--------------------| |    row head1       |    <- want have in mobile view |--------------------| |    data1           | |--------------------| |    data2           | |--------------------| |    row head2       | |--------------------| |    data3           | |--------------------| |    data4           | |--------------------|

anything did wrong in 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 , (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>

the css looks fine me. note in html you're opening <td> closing </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 , (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>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more