div中表中的元素不均匀，无法正确对齐

Question

I am unable to align items in the table there are two images i am providing below.. Image 1 has 7 rows in first column and 4 rows in second column it should be aligned to top just like image 2 even if it has uneven rows.

Here are the images:

 $("#action").click(function() { if ($("#actiondetails").is(":visible")) { $("#actiondetails").hide(); } else { $('#actiondetails').show(); } }); $(document).on('click', function(event) { if (!$(event.target).closest('#action').length) { // Hide the menus. $('#actiondetails').hide(); } }); 

 .dropbtn { background-color: black; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; vertical-align: bottom; } .dropdown-content a:hover { background-color: #f1f1f1 } .link-format { list-style-type: none; width: 100px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <div class="dropbtn" id="action">Dropdown <div class="dropdown-content" id="actiondetails"> <table> <tr> <td> <ul class="link-format" style="border-right:1px gray dashed"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> </ul> </td> <td> <ul class="link-format"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </td> </tr> </table> </div> </div> </div> 

Answer 1

To achieve this you need to set vertical-align: top on the td within the dropdown menu:

.dropdown-content td { 
  vertical-align: top;
}

 $("#action").click(function() { if ($("#actiondetails").is(":visible")) { $("#actiondetails").hide(); } else { $('#actiondetails').show(); } }); $(document).on('click', function(event) { if (!$(event.target).closest('#action').length) { // Hide the menus. $('#actiondetails').hide(); } }); 

 .dropbtn { background-color: black; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; vertical-align: bottom; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown-content td { vertical-align: top; } .link-format { list-style-type: none; width: 100px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <div class="dropbtn" id="action">Dropdown <div class="dropdown-content" id="actiondetails"> <table> <tr> <td> <ul class="link-format" style="border-right:1px gray dashed"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> </ul> </td> <td> <ul class="link-format"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </td> </tr> </table> </div> </div> </div>