删除顶部和底部填充

Question

我有下表： https : //www.w3schools.com/code/tryit.asp?filename=FM993ZP563E4

我试图弄清楚如何摆脱列表之间的距离。 在仍然使第二列毫瓦与相应的根列表项保持一致的同时，如何消除填充？

参考表：

Answer 1

如果我对您的理解正确，则需要从ul元素中删除填充（以及旧版浏览器的边距）。 然后，您可以摆脱.parent类的20px顶部填充：

 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

因为您的ul具有默认的顶部和底部margin ，所以您必须添加：

ul {
  margin: 0;
}

它应该工作。

检查更新的示例 。

Answer 3

您可以这样做：

 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>