Responsive Table in CSS

How to?

  • This table built with pure HTML via HTML widget so what you have to do is copy the HTML code below and combine with CSS

HTML:

				
					<table class="comparison-chart">
	<thead>
	  <tr>
		<th scope="col" class="features">
		<h3>System<br> Management<br> Features</h3>
		</th>
		<th scope="col" class="plus"><h3>Managed Monitoring</h3>
		</th>
		<th scope="col" class="premium"><h3>Managed Services</h3>
		</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
		<td data-label="Proactive System Monitoring & Critical Alert Notifications">Proactive System Monitoring &<br> Critical Alert Notifications</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="Secure Remote Access Tools">Secure Remote Access Tools</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="Next-Generation Antivirus & Spyware Protection">Next-Generation Antivirus &<br> Spyware Protection</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="Email Phish Testing & Training">Email Phish Testing & Training</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="DNS Based Protection">DNS Based Protection</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="Third Party Spam Filtering">Third Party Spam Filtering</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="Patch Management">Patch Management</td>
		<td data-label="Managed Monitoring"><i class="far fa-check"></i></td>
		<td data-label="Managed Services"><i class="far fa-check"></i></td>
	  </tr>
	  <tr>
		<td data-label="UNLIMITED Support Services" class="accent"><span style="text-decoration: underline;">UNLIMITED</span> Support Services</td>
		<td data-label="Managed Monitoring"><i class="far fa-times"></i></td>
		<td data-label="Managed Services"><i class="far fa-check accent"></i></td>
	  </tr>
	</tbody>
  </table>

CSS:

				
					.btn-on-hover .elementor-button {
    padding: 0;
}

table {
    border: 1px solid #e2e2e2;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table tr {
    background-color: #fff;
    border: 1px solid #e2e2e2;
    text-align: center;
}

table th {
    padding: 0;
}

/* thead */
th.features {
    background-color: #ebebeb;
    vertical-align: middle;
}
th.basic {
    background-color: #939393;
}
th.basic h3 {
    background-color: #5d5d5d;
}
th.plus {
    background-color: #0d89e5;
}
th.plus h3 {
    background-color: #0d89e5;
}
th.premium {
    background-color: #c40000;
}
th.premium h3 {
    background-color: #c40000;
}
table thead th:not(.features) * {
    color: #fff;
}
thead tr:first-child th {
    vertical-align: middle;
}
table thead th h3 {
    font-size: 20px !important;
    /*     height: 81px; */
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0;
}
table thead th p {
    padding: 1rem;
    font-size: 10px;
    font-weight: 300;
    margin-bottom: 0 !important;
}

/* tbody */
table td {
    padding: 1.8rem 1rem;
}
table tbody > tr:nth-child(odd) > td {
    background-color: #fff;
}
table tbody td:first-child {
    font-size: 16px;
    color: #000;
    vertical-align: middle;
    font-weight: bold;
}
table td i {
    color: #1a9c76;
    font-size: 41px;
}
table td i.fa-times {
    color: #fff;
    /*opacity: 0;*/
}

@media screen and (max-width: 600px) {
    table {
        border: 0;
    }
    th.features {
        text-align: center;
    }
    th.features br {
        display: none;
    }
    table thead th {
        display: flex;
        align-items: center;
        text-align: left;
    }
    table thead th h3 {
        height: auto;
        align-self: stretch;
        min-width: 138px;
    }
    table tr {
        border-bottom: 3px solid #002031;
        display: block;
        margin-bottom: 1rem;
    }

    table td {
        display: block;
        font-size: 0.8em;
        text-align: right;
        padding: 1rem;
    }
    table tbody td:nth-child(2) {
        background-color: #939393 !important;
    }
    table tbody td:nth-child(3) {
        background-color: #3491d1 !important;
    }
    table tbody td:nth-child(4) {
        background-color: #f04854 !important;
    }
    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
    table tbody td:first-child {
        font-size: 0.8em;
        background-color: #ebebeb !important;
        min-height: 65px;
    }
    table tbody td:first-child::before {
        width: 50%;
        text-align: left;
    }
    table tbody td,
    table tbody td i {
        color: #fff;
    }
    table td,
    table th {
        border: none !important;
    }
    table td:last-child {
        border-bottom: 0;
    }
    table td i {
        font-size: 20px;
    }
}

Example:

System
Management
Features

Managed Monitoring

Managed Services
Proactive System Monitoring &
Critical Alert Notifications
Secure Remote Access Tools
Next-Generation Antivirus &
Spyware Protection
Email Phish Testing & Training
DNS Based Protection
Third Party Spam Filtering
Patch Management
UNLIMITED Support Services