HTML issue - The first table starts after a long gap

Question

As per the screenshot, please guide me as how do I start the table heading from top of the page.

sharing some extract of the code below.

Plus the @media query does not work in Iphone properly. I have checked in an android device and it works like a charm. I have tried for Iphone 7.

  #emails {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#emails td,
#emails th {
  border: 1px solid #ddd;
  padding: 8px;
}

#emails tr:nth-child(even) {
  background-color: #f2f2f2;
}

#emails tr:hover {
  background-color: #ddd;
}

#emails th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

#emails2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#emails2 td,
#emails th {
  border: 1px solid #ddd;
  padding: 8px;
}

#emails2 tr:nth-child(even) {
  background-color: #f2f2f2;
}

#emails2 tr:hover {
  background-color: #ddd;
}

#emails2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}


/* 
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  /* Force table to not be like tables anymore */
  #emails2 table,
  #emails2 thead,
  #emails2 tbody,
  #emails2 th,
  #emails2 td,
  #emails2 tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  #emails2 th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  #emails2 tr {
    border: 1px solid #ccc;
  }
  #emails2 td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  #emails2 td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  /*
    	Label the data
    	*/
  #emails2 td:nth-of-type(1):before {
    content: "Domain";
  }
  #emails2 td:nth-of-type(2):before {
    content: "Email";
  }
  #emails2 td:nth-of-type(3):before {
    content: "Login";
  }
  #emails2 td:nth-of-type(4):before {
    content: "User";
  }
  #emails2 td:nth-of-type(5):before {
    content: "Disk Quota";
  }
  #emails2 td:nth-of-type(6):before {
    content: "Disk Used";
  }
  #emails2 td:nth-of-type(7):before {
    content: "Used Percentage";
  }
  #emails2 td:nth-of-type(8):before {
    content: "Delete";
  }
  #emails2 td:nth-of-type(9):before {
    content: "Change Password";
  }
}

input[type=text],
input[type=password] {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  padding: 6px 10px;
  margin: 3px 0;
  box-sizing: border-box;
}

input[type=button],
input[type=Submit],
input[type=reset] {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 6px 10px;
  text-decoration: none;
  margin: 3px 2px;
  cursor: pointer;

<pre>
  <style>...</style>
  <title>...</title>
  <meta/>
  <meta/>
<table id="emails">
  <tr class="tableheader">
    <th align="center"><u>User Dashboard</u></th>
  </tr>
</table>

</pre>

Answer 1

According to your screenshot, your table-s are inside a pre tag. pre tag preserves newlines (by default) in the source HTML file and displays them.

In your HTML code, before your first table there are many line breaks (possibly inside style and after title and multiple meta tags), they cause the white gap above the table.

Solution: don't put your elements inside the pre tag.