私は次の表を持って上下のパディング

Question

を削除します。https://www.w3schools.com/code/tryit.asp?filename=FM993ZP563E4

私はリストの間の距離を取り除くためにどのように把握しようとしています。 2番目の列のミリワットを対応するルートリスト項目に揃えたまま、パディングを取り除くことはどのように可能ですか？参照用

表：

Answer 1

：次に、あなたは.parentクラスの20pxトップパディングを取り除くことができます

ul { 
    margin: 0; 
} 

これはうまくいくはずです。

updated exampleを確認してください。

Answer 2

私が正しくあなたを理解していれば、あなたがul要素から（古いブラウザ用およびマージン）パディングを削除する必要があります。デフォルトmargin上部と底部を有しているulを持っているので、あなたが追加する必要があるため

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 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%;"> 
 
\t <tr> 
 
    \t <td class="td"> 
 
     \t <ul> 
 
      \t <li>Some Module Name 
 
       <ul> 
 
       \t <li>Some Module Name <strong>(300mW)</strong> 
 
        <li>Some Module Name <strong>(700mW)</strong> 
 
        <ul> 
 
        \t <li>Some Module Name <strong>(300mW)</strong> 
 
        </ul> 
 
       </ul> 
 
      </ul> 
 
      </td> 
 
      <td class="td parent"> 
 
      \t <strong>1000mW</strong> 
 
      </td> 
 
    </tr> 
 
    <tr> 
 
    \t <td class="td"> 
 
      <ul> 
 
      \t <li>Some Module Name 
 
       <ul> 
 
       \t <li>Some Module Name <strong>(300mW)</strong> 
 
        <li>Some Module Name <strong>(700mW)</strong> 
 
        <ul> 
 
        \t <li>Some Module Name <strong>(300mW)</strong> 
 
        </ul> 
 
       </ul> 
 
      </ul> 
 
      </td> 
 
      <td class="td parent"> 
 
      \t <strong>1000mW</strong> 
 
      </td> 
 
    </tr> 
 
    <tr> 
 
    \t <td class="td"> 
 
      <ul> 
 
      \t <li>Some Module Name <strong>1000mW</strong> 
 
      </ul> 
 
      </td> 
 
      <td class="td parent"> 
 
      \t <strong>1000mW</strong> 
 
      </td> 
 
    </tr> 
 
    <tfoot> 
 
     <tr> 
 
     <th>John</th> 
 
     <td class="used"><strong>1000mW</strong></td> 
 
     </tr> 
 
     </tfoot> 
 
    </table>