Remove Top and Bottom Padding

Question

I have the following table: https://www.w3schools.com/code/tryit.asp?filename=FM993ZP563E4

I'm trying to figure out how to get rid of the distance between the lists. How would it be possible to get rid of the padding while still having the second column milliwatts align with the corresponding root list items?

Table for reference:

Answer 1

If I understand you correctly you need to remove the padding (and margin for older browsers) from the ul element. Then you can get rid of the 20px top padding on the .parent class:

 table, th, td { border: 1px solid black; border-collapse: collapse; } .used { text-align: right; } td ul { margin-top: 0; padding-top: 0; } .parent { text-align: right; vertical-align: top; } 

 <table style="width:80%;"> <tr> <td class="td"> <ul> <li>Some Module Name <ul> <li>Some Module Name <strong>(300mW)</strong> <li>Some Module Name <strong>(700mW)</strong> <ul> <li>Some Module Name <strong>(300mW)</strong> </ul> </ul> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tr> <td class="td"> <ul> <li>Some Module Name <ul> <li>Some Module Name <strong>(300mW)</strong> <li>Some Module Name <strong>(700mW)</strong> <ul> <li>Some Module Name <strong>(300mW)</strong> </ul> </ul> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tr> <td class="td"> <ul> <li>Some Module Name <strong>1000mW</strong> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tfoot> <tr> <th>John</th> <td class="used"><strong>1000mW</strong></td> </tr> </tfoot> </table> 

Answer 2

Because you have ul which has a default margin top and bottom, so you have to add:

ul {
  margin: 0;
}

And it should work.

Check the updated example .

Answer 3

You can do it like this:

 table * {margin:0;padding:0 auto;box-sizing:border-box} /* to reset the defaults of all the elements inside the table */ table, th, td { border: 1px solid black; border-collapse: collapse; } .used { text-align: right; } .parent { text-align: right; vertical-align: top; /*padding-top: 20px;*/ } 

 <table style="width:80%;"> <tr> <td class="td"> <ul> <li>Some Module Name <ul> <li>Some Module Name <strong>(300mW)</strong> <li>Some Module Name <strong>(700mW)</strong> <ul> <li>Some Module Name <strong>(300mW)</strong> </ul> </ul> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tr> <td class="td"> <ul> <li>Some Module Name <ul> <li>Some Module Name <strong>(300mW)</strong> <li>Some Module Name <strong>(700mW)</strong> <ul> <li>Some Module Name <strong>(300mW)</strong> </ul> </ul> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tr> <td class="td"> <ul> <li>Some Module Name <strong>1000mW</strong> </ul> </td> <td class="td parent"> <strong>1000mW</strong> </td> </tr> <tfoot> <tr> <th>John</th> <td class="used"><strong>1000mW</strong></td> </tr> </tfoot> </table>