Html table/tr height

Question

I am trying to fix height for HTML table row. Below is the code I am using:

<div data-role="page">
      <div class="pageTitle">
      <h1>Products</h1>
      </div>

      <div class="toolbar">
        <div class="leftItem backButton">
          <a class="slide" href="<%= url_for :action => :back_to_index %>">Back</a>
        </div>

        <div class="rightItem blueButton" >
          <a href="<%= url_for :controller => :Shippingaddress, :action => :new %>">Check Out</a>
        </div>
      </div>

      <div class="content">

      <ul>
         <% for i in 0..($products.length - 1)  %>
           <li>
              <form method="POST" action="<%= url_for :action => :postAsynchttp %>">
                  <table style="height:20px">
                      <tr>
                      <td style="height:20px; width:80px">    
                          <a href="<%= url_for :action => :productDetails, :id=> $products[i.to_s] %>">
                          <span class="title"><%= $products[i.to_s] %></span>
                          </a>
                      </td>    
                      <td width='40'>       
                          <input type="submit" value="Add to Cart"/>                        
                      </td>
                      </tr>
                  </table>           
              </form>
          </li>
         <% end %>
        </ul>

      </div>
</div>  

All I am getting is the output below:

This is not the output I want. I want no extra space after Add to Cart button in the table row.

Answer 1

You will need to set the Height of your li and not the Table/tr/td

To do this in CSS:

ul li {height: 20px;}

To do this in your existing html:

<li style="height: 20px;">

Answer 2

Also, in addition to my first answer, after I looked at this for a minute, I wonder do you even need your list items to be in a table, i wonder if this is adding additional whitespace. Try this code in place of what you have currently, I removed the table and manually spaced your product link and button. I think this should do the trick for you.

<div data-role="page">
  <div class="pageTitle">
  <h1>Products</h1>
  </div>

  <div class="toolbar">
    <div class="leftItem backButton">
      <a class="slide" href="<%= url_for :action => :back_to_index %>">Back</a>
    </div>

    <div class="rightItem blueButton" >
      <a href="<%= url_for :controller => :Shippingaddress, :action => :new %>">Check Out</a>
    </div>
  </div>

  <div class="content">

  <ul>
     <% for i in 0..($products.length - 1)  %>
       <li>
          <form method="POST" action="<%= url_for :action => :postAsynchttp %>">   
                      <a href="<%= url_for :action => :productDetails, :id=> $products[i.to_s] %>">
                      <span class="title"><%= $products[i.to_s] %></span>
                      </a>
                  &nbsp;
                      <input type="submit" value="Add to Cart"/>                        
          </form>
      </li>
     <% end %>
    </ul>

  </div>
</div>

Answer 3

Pls do try to increase width of in below code.

(try to increase it as 100%>