删除顶部和底部填充答案

【问题标题】：Remove Top and Bottom Padding删除顶部和底部填充
【发布时间】：2017-12-07 07:12:48
【问题描述】：

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

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

供参考的表格：

【问题讨论】：

您可以查看代码吗？你可以尝试把<td style="padding: 0px; margin: 0px;">

标签： html css html-table

【解决方案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>

【讨论】：

非常感谢。

【解决方案2】：

因为你有ul，它有一个默认的margin顶部和底部，所以你必须添加：

ul {
  margin: 0;
}

它应该可以工作。

检查updated example。

【讨论】：

很高兴听到这个消息:)

【解决方案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>

【讨论】：