Skip to content

Instantly share code, notes, and snippets.

@stephenasamoah

stephenasamoah/amp-accordion-child-table-fix.html

Last active June 13, 2017 16:52
Show Gist options
  • Save stephenasamoah/cbc628bb7172b6456c2c306bac8ed346 to your computer and use it in GitHub Desktop.
Save stephenasamoah/cbc628bb7172b6456c2c306bac8ed346 to your computer and use it in GitHub Desktop.
Download ZIP
Fix for amp-accordion table child-element
Raw
amp-accordion-child-table-fix.html
// amp-accordion doesn't seem to play well with table elements. Table inside of accordion maxes out to only about 50-60% width.
// Creating a dummy <tr> with <td> equal to amount of rows in table seemed to fix it. The dummy <tr> needs to have "display:table"
// to be able to override ".i-amphtml-content" 's default value of "display: block!important".
// Of course, table will be adjusted to preferred percentage.
// To mask text values in <td>'s, color was set to <body> background-color to hide text and make it look empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
amp-accordion table tr.accordion-table-controller {
display: table;
color: #fff;
}
</style>
</head>
<body>
<amp-accordion>
<section>
<h2 class="table__sub-heading">Services</h2>
<table class="table">
<tr>
<td>TV</td>
<td>
<i class="icn__compare check"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
</tr>
<!-- item 2 -->
<tr>
<td>Room Service</td>
<td>
<i class="icn__compare check"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
</tr>
<!-- item 3 -->
<tr>
<td>Cleaning</td>
<td>
<i class="icn__compare uncheck"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
<td>
<i class="icn__compare check"></i>
</td>
</tr>
<!-- item 4 -->
<tr>
<td>Capacity</td>
<td>2+2</td>
<td>4+2</td>
<td>6+2</td>
</tr>
<!-- item 5 -->
<tr>
<td>Size</td>
<td>42m²</td>
<td>48m²</td>
<td>66m²</td>
</tr>
<!-- Dummy Control -->
<tr class="accordion-table-controller" role="presentation">
<td>Size</td>
<td>42m²</td>
<td>48m²</td>
<td>66m²</td>
</tr>
</table>
</section>
</amp-accordion>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment