Can't get table to show up using HTML and CSS

Question

I am designing an HTML/CSS popup that is being used with openlayers 3, and I am having trouble getting a table to show up in the popup that displays when you click on the map.

I'm fairly new to HTML and CSS, so I may be making a really obvious error, but I have searched for a solution to this all afternoon to no avail. I only did the HTML/CSS tutorial on codeacademy recently so I apologize if there's a simple concept I'm overlooking here.

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>john@example.com</td>
            </tr>
            <tr>
              <td>Mary</td>
              <td>Moe</td>
              <td>mary@example.com</td>
            </tr>
            <tr>
              <td>July</td>
              <td>Dooley</td>
              <td>july@example.com</td>
            </tr>
          </tbody>
        </table>

      </div>
    </section>

css:

.table {
  border: 1px black;
}

Here is a link to my jsfiddle: https://jsfiddle.net/iboates/1ba7rgcp/

All I want to know is how to get the table to show up.

Answer 1

我签出，发现您的js代码中有lorem ipsum，如果您删除它，则不显示该表，则可以显示该表