导航栏和内容重叠

Question

我正在尝试使用css和HTML，但我收到一个错误。我正在从firebase检索数据并以table的形式显示它。但是表格没有正确显示。表格标题和数据排列不正确而且它们正在上面导航杆

var database = firebase.database();
database.ref('Inventory').on('value', function(snapshot) {
  if (snapshot.exists()) {
    var config = {
      apiKey: "AIzaSyA8rtBYqR3hkj3YyzumZd98YNVrf1MbYz4",
      authDomain: "ngoapp-74c5f.firebaseapp.com",
      databaseURL: "https://ngoapp-74c5f.firebaseio.com",
      projectId: "ngoapp-74c5f",
      storageBucket: "ngoapp-74c5f.appspot.com",
      messagingSenderId: "273078401200"
    };
    firebase.initializeApp(config);

    var content = '';
    snapshot.forEach(function(data) {
      var val = data.val();
      content += '<tr>';
      content += '<td>' + val.category + '</td>';
      content += '<td>' + val.name + '</td>';
      content += '<td>' + val.quantity + '</td>';
      content += '</tr>';
    });
    $('#ex-table').append(content);
  }
});

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
  filter: alpha(opacity=50);
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

* {
  padding: 0;
  margin: 0;
}

#ex-table {
  font-weight: bold;
  font-size: 50px;
  top: 50px;
  height: 100%;
  overflow: auto;
}

nav ul {
  list-style-type: none;
  height: 50px;
  margin: 0px;
  padding: 0;
  padding-right: 200px;
  overflow: hidden;
  background-color: #000000;
  position: fixed;
  top: 140px;
  width: 100%;
  opacity: .5;
  top: 0;
}

nav ul li {
  float: left;
  border-right: 1px solid #bbb;
  font-weight: bold;
  font-size: 20px;
}

nav ul li:last-child {
  border-right: none;
  border-spacing: 20px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 200px;
  padding-right: 200px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>

<div id="bg">
  <img src="https://media.gettyimages.com/photos/teenager-friends-dancing-and-laughing-on-a-rooftop-party-picture-id513546832" alt="">
</div>

<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Category</th>
    <th>Name</th>
    <th>Quantity</th>
</table>
<script>
</script>
<nav>
  <ul>
    <li><a href="addinventory.html">Add Inventory</a></li>
    <li><a href="viewinventory.html">View Inventory</a></li>
  </ul>
</nav>

请为此问题建议一个解决方案。如果我能以更好的方式显示表格，那么这将是有利的。

提前致谢。