CODEWITHSUNDEEP
htmlcsshtml-table
user5056973
user5056973

Reputation: 447

Remove Top and Bottom Padding

I have the following table: https://www.w3schools.com/code/tryit.asp?filename=FM993ZP563E4

I'm trying to figure out how to get rid of the distance between the lists. How would it be possible to get rid of the padding while still having the second column milliwatts align with the corresponding root list items?

Table for reference: enter image description here

Upvotes: 0

Views: 1265

Answers (3)

VXp
VXp

Reputation: 12068

You can do it like this:

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>

Upvotes: 1

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

Because you have ul which has a default margin top and bottom, so you have to add:

ul {
  margin: 0;
}

And it should work.

Check the updated example.

Upvotes: 1

Chris Spittles
Chris Spittles

Reputation: 15359

If I understand you correctly you need to remove the padding (and margin for older browsers) from the ul element. Then you can get rid of the 20px top padding on the .parent class:

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>

Upvotes: 3

Related Questions