Stylish Responsive Table

HTML, CSS

by Ovi Stof

HTML

<table class="resp resp1">
      <thead>
        <tr>
          <th>Sed fermentum dapibus varius</th>
          <th>Varius</th>
          <th>Cras vehicula</th>
          <th>Link</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Nam aliquet risus ex, et porta tortor tincidunt semper. Cras rhoncus mauris nec fringilla consectetur. Nulla vel urna scelerisque, tincidunt risus quis, mollis dolor. In pretium ut risus vel hendrerit. Mauris porta tempor neque, non convallis justo tristique in. Integer mollis laoreet lacus eu cursus. Cras vehicula ut enim non varius.</td>
          <td>&nbsp;29 mar-2 apr 2021</td>
          <td>
            <ul>
              <li><strong>efficitur sed tellus</strong>;</li>
              <li><strong>curabitur auctor</strong> euismod diam nec volutpată;</li>
              <li><strong>curabitur id faucibus nulla</strong>, ut lobortis urna.</li>
            </ul>
          </td>
          <td><a class="buton_acc" href="#">Access form</a></td>
        </tr>
        <tr>
          <td>Ut ac nisi in velit aliquet congue</td>
          <td>&nbsp;5-7 apr 2021</td>
          <td>
            <ul>
              <li><strong>nullam malesuada nisl</strong>  eget mi volutpat dapibus ac ac enim;</li>
              <li><strong>etiam volutpat pretium felis</strong>, a finibus lacus vehicula ac;</li>
              <li><strong>mauris volutpat</strong>, nibh ut accumsan consectetur, metus leo accumsan ex, et interdum est ligula nec dui.</li>
            </ul>
          </td>
          <td><a class="buton_acc" href="#">Access form</a></td>
        </tr>
      </tbody>
    </table>

CSS

table.resp { 
        width: 100%; 
        border-collapse: collapse; 
        border: 3px solid #2a81ba; 
      }
      .resp th { 
        background: #2a81ba; 
        color: white; 
        font-weight: bold;   
        padding: 12px 6px;
        text-align:center;	
        vertical-align:middle;
        border:0px solid #fff;
      }
      .resp th:not(:last-child) {border-right:3px solid #fff; }
      .resp td {border: 2px solid #ccc; text-align: left; }
      @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  
      {	
        table.resp, .resp thead, .resp tbody, .resp th, .resp td, .resp tr {display: block;}		
        .resp thead tr { /* Hide table headers (but not "display: none;", for accessibility) */
          position: absolute;
          top: -9999px;
          left: -9999px;
        }	
        .resp td { /* Row Simulation */		
          border: none;
          border-bottom: 1px solid #000; 
          position: relative;
        }	
        .resp td:before { 		
          position: absolute; /* Header simulation */
          top: 6px;
          left: 6px;
          padding: 1px 10px 3px 1px; 
          margin:-5px;
          white-space: nowrap;
          border-right:3px dashed white; 
          color:black;
          font-weight:bold;
          font-style:italic;
        }
      	.resp td:nth-of-type(1) {background: #2a81ba;  color:white;}		
		 .resp td:nth-of-type(1):before { color:white;}
      }
      /* The attributes below are entered on the respective page, in order to be customized​ */
      @media only screen and (max-width: 760px)
        , (min-device-width: 768px) and (max-device-width: 1024px)  
      {
        .resp1 td {padding-left: 40%;}
        .resp1 td:before {width: 30%; } 
        .resp1 td:nth-of-type(1):before { content: "Cui se adresează"; }
        .resp1 td:nth-of-type(2):before { content: "Perioada"; }
        .resp1 td:nth-of-type(3):before { content: "Documente"; }
   ...