仅基于CSS的移动设备响应表

Question

I want to create a normal table on desktop browsers that transforms into a vertical table with some space between the data on a mobile device. The Data should be in height so that the table has not more width than the screen.

Basically, I want to do this with CSS only!

I tried something with CSS and rotate. My Approach with CSS only for rotate.

Now:

Col1        Col2
data1_1     data1_2
data2_1     data2_2

Should be:

Col1 data1_1 
Col2 data1_2
some padding here then second "row"
Col1 data2_1
Col2 data2_2

The Table Code:

 @media(max - width: 767 px) { .table { rotate: -90 px; } } 

 <table class="table"> <thead> <tr> <th scope="col">Col1</th> <th scope="col">Col2</th> </tr> </thead> <tbody> <tr> <td>data1_1</td> <td>data1_2</td> </tr> <tr> <td>data2_1</td> <td>data2_2</td> </tr> </tbody> </table> 

Answer 1

best i could come up with:

html:

<table class="table">
      <thead>
         <tr>
          <th scope="col">Col1</th>
           <th scope="col">Col2</th>
         </tr>
      </thead>
      <tbody>
        <tr>
          <td>data1_1</td>
          <td>data1_2</td>
        </tr>
        <tr>
          <td>data2_1</td>
          <td>data2_2</td>
        </tr>
      </tbody>
    </table>

css:

.table {
  border:1px solid black;
  margin-top:-2em;
}

.table tr {
  display:flex;
  flex-direction:column;
  margin-bottom:1.5em;
}

.table thead {
  transform:rotate(90deg) translateX(80%) translateY(-1.75em);
}

.table thead tr {
  flex-direction:row;
}

.table thead tr th {
  padding-left:1em;
}

.table thead tr th:first-child {
  padding-left:0;
}

linky:

https://codepen.io/carolmckayau/pen/BqYoBe

Answer 2

best and easy approach concept as below :

 window.onload = function () { 'use strict'; var i, element; //create headers for the mobile view (function () { var headers = document.querySelectorAll("th"), index = 1, columns = document.querySelectorAll("td"), headerName, responsiveHeader; if (columns.length > 0) { for (i = 0; i < columns.length; i += 1) { if (index > headers.length) { index = 1; } //mobile headers are actually td element = columns[i]; headerName = document.querySelector('th:nth-of-type(' + index + ')').textContent; responsiveHeader = document.createElement("td"); responsiveHeader.className = "responsive-header"; responsiveHeader.innerHTML = headerName; element.parentNode.insertBefore(responsiveHeader, element); index+=1; } } }()); var tableMinWidth, hasBeenSet = false; //addds mobile class for table when table is larger than screen function sytleTable () { var tableWidth = document.querySelector('.responsive-table').offsetWidth, windowWidth = window.innerWidth, responsiveTables = document.getElementsByClassName('responsive-table'); if (tableWidth >= windowWidth) { if (!hasBeenSet) { tableMinWidth = tableWidth; hasBeenSet = true; } for (i = 0; i < responsiveTables.length; i += 1) { element = responsiveTables[i]; element.classList.add("mobile"); } } else if (tableWidth >= tableMinWidth) { for (i = 0; i < responsiveTables.length ; i += 1) { element = responsiveTables[i]; element.classList.remove("mobile"); } } } window.onresize = function () { sytleTable(); }; sytleTable(); }; //window.onload 

 /*Responsive Tables*/ tr:nth-of-type(odd) { background: #eee; } th { font-weight: bold; } td, th { padding: 6px; text-align: left; } .responsive-header { display: none; } /*Mobile*/ .responsive-table.mobile, .mobile thead, .mobile tbody, .mobile th, .mobile td, .mobile tr { display: block; } .mobile thead tr { position: absolute; top: -9999px; left: -9999px; } .mobile tr { border: 1px solid #ccc; } .mobile td { border: none; border-bottom: 1px solid #ccc; position: relative; text-align: right; word-wrap: break-word; } .mobile .responsive-header { font-size: 18px !important; color: #444444 !important; font-weight: bold; display: inline; float: left; padding: 0px !important; padding-left: 5px!important; border:none; ; } .mobile td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } 

 <link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/libapps/sites/210/include/style.css"> <table class="responsive-table"> <thead > <tr > <th>Name</th> <th>Location</th> <th>Type & #</th> <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </tr> </thead> <tbody > <tr > <td><a href="http://irsc-asc.weebly.com/">Academic Support Center</a><hr> <em>Computer Information</em>: Student use only. B&W printing 10c/page. No time limit. </td> <td>L200</td> <td>15 (PC)</td> <td>1 pm - 5 pm</td> <td>8 am - 9 pm</td> <td>8 am - 9 pm</td> <td>8 am - 9 pm</td> <td>8 am - 9 pm</td> <td>8 am - 2 pm</td> <td>Closed</td> </tr> <tr > <td><a href="https://www.irsc.edu/careercenter/careercenter.aspx">Career Center</a><hr> <em>Computer Information</em>: Student/Alumni use only. Free B&W printing (5 page max). Scanner available for student use. Software includes WinWay Resume, Microsoft Office. </td> <td>W104</td> <td>18 (PC)</td> <td>Closed</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 5 pm</td> <td>Closed</td> </tr> <tr > <td><a href="http://irsc.libguides.com/aboutthelibraries">Miley Library</a><hr> <em>Computer Information</em>: Student and community computers available. time limit for community use. B&W printing 10c/page. Printing (B&W), research assistance, Microsoft Office.<br> For more information, view the <a href="http://irsc.libguides.com/c.php?g=553156&p=3800300">College library guidelines.</a> </td> </td> <td>L100</td> <td >24 (PC)</td> <td>1 pm - 5 pm</td> <td>7:45 am - 9 pm</td> <td>7:45 am - 9 pm</td> <td>7:45 am - 9 pm</td> <td>7:45 am - 9 pm</td> <td>7:45 am - 5 pm</td> <td>Closed</td> </tr> <tr > <td>Student Services <hr> <em>Computer Information</em> Student use only (ID required). B&W printing 10c/page. No time limit. B&W Printing is free (5 page limit). </td> <td>W103</td> <td>33 (PC)</td> <td>Closed</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 6:30 pm</td> <td>8 am - 5 pm</td> <td>Closed</td> </tr> <tr > <td>Kight Center Computer Lab <hr> <em>Services and information: Services vary. </em>: </td> <td>V216</td> <td>18 (Mac)</td> <td>Closed</td> <td>10 am - 8 pm</td> <td>10 am - 8 pm</td> <td>10 am - 8 pm</td> <td>10 am - 8 pm</td> <td>10 am - 8 pm</td> <td>10 am - 4 pm</td> </tr> <tr > <td>Computer Science Labs<hr> <em>Services and information</em>: Lab hours and services vary. </td> <td>Various</td> <td>Various</td> <td colspan= 7><center><a href="http://irsccsdept.org/schedule/">Check Lab Schedule</a></center></td> </tr> </tbody> </table>