Struggling to display a table on my website using HTML and CSS

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.

Answer №1

Upon reviewing your JavaScript code, I discovered that there is lorem ipsum text present which is causing the table not to display. If you remove the lorem ipsum text, the table should be visible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting jQuery: Unable to refresh the webpage

I have a PHP page that contains a form, checkboxes, and a submit button. I added an if statement to execute a PHP script I created when the button is clicked, which deletes certain values from the selected rows. The button functions properly and changes s ...

Troubleshooting Issues with Bootstrap Carousel Functionality

I'm facing some difficulties with the Bootstrap carousel on my website. I have followed all the instructions carefully and researched for solutions, but unfortunately, my carousel is not functioning properly. It seems like everything is set up correct ...

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

Is it possible to manage HTML checkboxes without using javascript?

Can dynamically created checkboxes in HTML be managed without the use of Javascript? PHP is responsible for displaying these checkboxes and my knowledge of Javascript is limited. Are there any basic functions that can identify if a user has clicked on a s ...

Switching JSON data when clicked in Angular 2

Looking for a way to dynamically switch between different data sets in JSON upon user interaction with UI buttons. I am utilizing Angular 2 framework for this task. The HTML structure is as follows: <button type="button" (click)="changeOdds('odds ...

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...

Styling emails with CSS: Tips for customizing fonts

I've been experimenting with setting a personalized font for an email. Within the HTML code of the email, I included the fonts using this snippet: <head> <style> /* latin-ext */ @font-face { font-family: &ap ...

Converting CSS code into JavaScript

I am currently working with the following code: .mr15 > * margin-right: 15px &:last-child margin-right: 0 I need help translating this code to Javascript. Should I use JQuery or pure Javascript for this scenario? Thank you. ...

Determining if an HTML dialog was closed using the escape key

Wondering about detecting when an HTML dialog is closed using the ESC key. Specifically referring to the HTML dialog, not jQuery. ...

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

Hide the div in PHP if the active variable is null

It looks like I'll need to implement Jquery for this task. I have a print button that should only appear if my array contains data. This is a simplified version of what I'm aiming to achieve: HTML <?include 'anotherpage.php'?> ...

Printing a specified week number in PHP

I have a piece of code that I need help with. It is related to printing the selected day of the week from the server: $daysOfWeek = array( "Monday" => 1, "Tuesday" => 2, "Wednesday" => 3, ...

Tips for preventing child elements from becoming distorted when the parent element is resized

How can I prevent rotated child elements from skewing when the parent element is scaled? Here is the code snippet that I am working with: <svg viewbox="0 0 500 500"> <g class="parent" transform="matrix(1.71341 0 0 1 -42.302 0)"> <path ...

How can I delete a CSS class from an element?

Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

Ways to specify the encoding for a text iframe embedded in a webpage

Can anyone help me with document embedding in HTML? In my current project, I am directly embedding my update logs as text files into the webpage, along with a selection menu to view all the updates. However, I ran into a minor issue where the Firefox cons ...

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...