Why does margin-bottom not work with ?

Question

tr {
  margin-bottom: 100px;
}

<table>
  <thead>
    <tr>
      <th>School Name</th>
      <th>State</th>
      <th>League</th>
      <th>Division</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
  </tbody>
</table>

I need a table like this with some basic information where I'll add a button that on click expands that row with some more details.

I couldn't find the right answer for that so I thought about changing css with some transition to the table on click where some specific row gets margin bottom from 0 to 100px maybe and then find the position of that tr and let say:

trPosition= 100px; trHeight= 30px;

The bottom of the tr is at: 70px

And some new element appends with jquery at that position with a height of tr margin bottom.

But before all that I can't even use margin bottom between rows, why is that?

And is there some other solution for this?

Answer 1

Table elements do not have margin - you can use padding-bottom here. Another thing is you need to apply it to the td or th element.

See demo below:

tr > td {
  padding-bottom: 100px;
}

<table>
  <thead>
    <tr>
      <th>School Name</th>
      <th>State</th>
      <th>League</th>
      <th>Division</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
  </tbody>
</table>

Answer 2

If you change display for block, you will see margin, but I'm not sure, if that's what you need. You should use different methods.

margin-bottom: 100px; display: block;