删除顶部和底部填充

Question

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

我正试图弄清楚如何摆脱列表之间的距离。如何在第二列毫瓦与对应的根列表项对齐的同时摆脱填充怎么样？

表格供参考：

Answer 1

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

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;
}

它应该有用。

检查updated example。

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>