title: JQuery Datatables row height
body: <p>I have a page where people can enter in first/last name, phone, email, and ethnicity click add and it adds an entry into the datatables. The problem is after clicking add the table shows up like this:</p>
  
  <p><img src="https://i.stack.imgur.com/AVIjL.png" alt="Table"></p>
  
  <p>How do I adjust the height of each row so that it shows up properly. This is my html code for the table:</p>
  
  <pre><code>&lt;div id="table"&gt;
      &lt;form id="add_nrow" title="Add"&gt;
          &lt;br/&gt;
          &lt;label for="name"&gt;First Name&lt;/label&gt;&lt;input type="text" name="fname" id="fname" class="required" rel="0" /&gt;
          &lt;br /&gt;
          &lt;label for="name"&gt;Last Name&lt;/label&gt;&lt;input type="text" name="lname" id="lname" rel="1" /&gt;
          &lt;br /&gt;
          &lt;label for="name"&gt;Phone&lt;/label&gt;&lt;input type="text" name="phone" id="phone" rel="3" /&gt;
          &lt;br /&gt;
          &lt;label for="name"&gt;Email&lt;/label&gt;&lt;input type="text" name="email" id="email" rel="4" /&gt;
          &lt;br /&gt;
          &lt;label for="name"&gt;Ethnicity&lt;/label&gt;&lt;input type="text" name="ethnicity" id="ethnicity" rel="5" /&gt;
          &lt;br /&gt;   
          &lt;input type="button" value="Add" id="addbtn" /&gt;&lt;br/&gt;&lt;br/&gt;  
      &lt;/form&gt;
  
      &lt;table id="reg_more" border="1"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Phone&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Ethnicity&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jquery code</p>
  
  <pre><code>$("#addbtn").click(addrow);
  $('#reg_more').dataTable({
                  "bLengthChange": false,
                  "bInfo": false,
                  "bPaginate": false,
                  "bStateSave": true,
                  "rowHeight": 'auto',
                  "bFilter": true,
                  "bSort": false,
                  "bAutoWidth": false
              });
  
  
  function addrow() {
      $('#reg_more').dataTable().fnAddData( [
          $('#fname').val(),
          $('#lname').val(),
          $('#phone').val(),
          $('#email').val(),
          $('#ethnicity').val()] );
      }
  </code></pre>
  
  <p>I have two questions really:</p>
  
  <ol>
  <li>How do I adjust the height properly so the user can see the data?</li>
  <li>If the enter in the information of 20 people, how do I take all that data so I can enter it into a mysql database?</li>
  </ol>