Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create Responsive Feature Comparison Table in Genesis
<table>
<thead>
<tr>
<th>Features</th>
<th>iPhone 5</th>
<th>iPhone 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Prices</td>
<td>&#8377;24,999</td>
<td>&#8377;29,999</td>
</tr>
<tr>
<td>Battery Capacity</td>
<td>1440 mAh</td>
<td>1570 mAh</td>
</tr>
<tr>
<td>Screen Size</td>
<td>4 inches</td>
<td>4 inches </td>
</tr>
<tr>
<td>Resolution</td>
<td>640x1136 pixels</td>
<td>640x1136 pixels</td>
</tr>
<tr>
<tbody>
</table>
/*Add the CSS code snippets to the style.css file of your active child theme.*/
tbody tr:nth-of-type(2n) {background-color: #f0f0f0;}
th {background-color:#018DB1;font-weight:bold;color:#fff;}
tbody tr td:nth-of-type(1) {font-weight: bold;}
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}
/*Add the following scripts inside the Footer Scripts box located at Genesis theme settings of your active child theme.*/
<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment