html - 删除顶部和底部填充

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>