Struggling to display a table in an HTML/CSS popup used with openlayers 3 when clicking on the map. I'm new to HTML and CSS, and despite searching for a solution all afternoon, I can't seem to figure it out. Apologies if I'm missing a basic concept from my recent Codecademy tutorial.
html:
<section class="info">
<div class="info-container" id="popup-content">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78d888f89a7829f868a978b82c984888a">[email protected]</a></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7bab6a5ae97b2afb6baa7bbb2f9b4b8ba">[email protected]</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2349564f5a63465b424e534f460d404c4e">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
</section>
css:
.table {
border: 1px black;
}
Check out my jsfiddle for the issue: https://jsfiddle.net/iboates/1ba7rgcp/
Looking for help on getting the table to display correctly.