title: Add form to html tabel cell
body: <p>I want to add an input form to an HTML table cell when a checkbox is selected.</p>
  
  <p>When I add some form of text field or number field to the table cell to create a form, the text box doesn't show. only the text of my label shows.</p>
  
  <pre><code>&lt;td&gt;
  &lt;label class="collapsible"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;span class="collapser"&gt;Edit&lt;/span&gt;
  &lt;span class="arrow"&gt;&amp;gt;&lt;/span&gt;
  &lt;div class="collapsed"&gt;
  &lt;form method="post"&gt;
  &lt;label for="pwd"&gt;Hello World&lt;/label&gt;&lt;br&gt;
  &lt;input type="number" min="1" step="1" class="form-control" id="pwd" name=min_qty&gt;
  &lt;/form&gt;&lt;/div&gt;&lt;/label&gt;&lt;/td&gt;
  </code></pre>
  
  <p>My Css code as well:</p>
  
  <pre><code>.collapsible {
    display: block;
    margin-bottom: 1rem;
  }
  .collapsible input {
    position: absolute;
    left: -9999px;
  }
  .collapsible input:focus ~ .collapser {
    border-color: grey;
  }
  .collapsible .collapser {
    cursor: pointer;
    border: 1px transparent dotted;
  
  }
  
  .collapsible .arrow {
    float: right;
    margin-left: 0.5em;
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.25s ease-out;
  }
  .collapsible input:checked ~ .arrow,
  .collapsible input:checked ~ .collapser .arrow {
    transform: rotate(270deg);
  }
  .collapsible .collapsed {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity 0.25s, margin 0.5s 0.25s, font-size 0.5s 0.25s, padding 0.5s 0.25s;
  }
  .collapsible input:checked ~ .collapsed {
    font-size: 12px;
    opacity: 1;
    height: auto;
    padding: 5px 0;
    /* grow, then fade in */
    transition: margin 0.25s, padding 0.25s, font-size 0.25s, opacity 0.5s 0.25s;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/3Kl6q.jpg" rel="nofollow noreferrer">My table output example</a></p>