title: Set position of radio button in table cell
body: <p>I've got a problem with the alignment of my radio button. I would like to set the position of the radio button freely, but with the code I have now I'm not able to set it properly.</p>
  
  <p>It stays in the middle from the top and I can only changes the <code>margin-left</code>.
  Can anyone help me?</p>
  
  <p>You can find my code here: <a href="https://jsfiddle.net/3vL8Lgo9/" rel="nofollow noreferrer">https://jsfiddle.net/3vL8Lgo9/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.divTable {
    display: table;
  }
  
  .divTableRow {
    display: table-row;
  }
  
  .divTableHeading {
    background-color: #EEE;
    display: table-header-group;
  }
  
  .divTableCell,
  .divTableHead {
    display: table-cell;
    padding: 3px 10px;
  }
  
  .divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
  }
  
  .divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
  }
  
  .divTableBody {
    display: table-row-group;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="divTable" border="1" cellspace="0" cellpadding="0" style="width:1134px; height:756px;"&gt;
    &lt;tbody class="divTableBody"&gt;
      &lt;tr class="divTableRow"&gt;
        &lt;td class="divTableCell" style="width:900px; height:194px;" colspan="4"&gt;&lt;/td&gt;
        &lt;td class="divTableCell" style="width:234px; height:194px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="divTableRow"&gt;
        &lt;td colspan="5" style="width:1134px; height:185px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="divTableRow" style="padding-top:100px;"&gt;
        &lt;td class="divTableCell" rowspan="2" style="width:140px; height:293px;"&gt;&lt;/td&gt;
        &lt;td class="divTableCellRadioButton" style="width:35px; height:146px;"&gt;
          &lt;input type="radio" name="gender" value="male"&gt;
        &lt;/td&gt;
        &lt;td class="divTableCell" rowspan="2" style="width:251px; height:293px;"&gt;&lt;/td&gt;
        &lt;td class="divTableCellRadioButton" style="width:35px; height:146px;"&gt;&lt;/td&gt;
        &lt;td class="divTableCell" rowspan="2" style="width:673px; height:293px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="divTableRow"&gt;
        &lt;td class="divTableCellRadioButton" style="width:35px; height:146px;"&gt;&lt;/td&gt;
        &lt;td class="divTableCellRadioButton" style="width:35px; height:146px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="divTableRow"&gt;
        &lt;td class="divTableCell" style="width:1000px; height:84px;" colspan="4"&gt;&lt;/td&gt;
        &lt;td class="divTableCell" style="width:134px; height:84px;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>