设置表格单元格中单选按钮的位置

Question

我的单选按钮对齐出了问题。我想自由设置单选按钮的位置，但是根据我现在的代码，我无法正确设置它。

它从顶部停留在中间，我只能更改margin-left。 任何人都可以帮助我吗？

您可以在此处找到我的代码：https://jsfiddle.net/3vL8Lgo9/

＆＃13;

＆＃13;

.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;
}

＆＃13;

<table class="divTable" border="1" cellspace="0" cellpadding="0" style="width:1134px; height:756px;">
  <tbody class="divTableBody">
    <tr class="divTableRow">
      <td class="divTableCell" style="width:900px; height:194px;" colspan="4"></td>
      <td class="divTableCell" style="width:234px; height:194px;"></td>
    </tr>
    <tr class="divTableRow">
      <td colspan="5" style="width:1134px; height:185px;"></td>
    </tr>
    <tr class="divTableRow" style="padding-top:100px;">
      <td class="divTableCell" rowspan="2" style="width:140px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;">
        <input type="radio" name="gender" value="male">
      </td>
      <td class="divTableCell" rowspan="2" style="width:251px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCell" rowspan="2" style="width:673px; height:293px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCell" style="width:1000px; height:84px;" colspan="4"></td>
      <td class="divTableCell" style="width:134px; height:84px;"></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想要它在中间;

.divTableRow {
  display: table-row;
  text-align:center;
}

还是我误解了你？

Answer 2

将.divTableCellRadioButton设置为position:relative。现在将输入设置为position:absolute并根据需要定义top，left，bottom，right位置。下面的示例显示了容器顶部的单选按钮20px。

.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;
}

.divTableCellRadioButton {
  position:relative;
}

.divTableCellRadioButton input {
  position:absolute;
  top:20px;
}

<table class="divTable" border="1" cellspace="0" cellpadding="0" style="width:1134px; height:756px;">
  <tbody class="divTableBody">
    <tr class="divTableRow">
      <td class="divTableCell" style="width:900px; height:194px;" colspan="4"></td>
      <td class="divTableCell" style="width:234px; height:194px;"></td>
    </tr>
    <tr class="divTableRow">
      <td colspan="5" style="width:1134px; height:185px;"></td>
    </tr>
    <tr class="divTableRow" style="padding-top:100px;">
      <td class="divTableCell" rowspan="2" style="width:140px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;">
        <input type="radio" name="gender" value="male">
      </td>
      <td class="divTableCell" rowspan="2" style="width:251px; height:293px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCell" rowspan="2" style="width:673px; height:293px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
      <td class="divTableCellRadioButton" style="width:35px; height:146px;"></td>
    </tr>
    <tr class="divTableRow">
      <td class="divTableCell" style="width:1000px; height:84px;" colspan="4"></td>
      <td class="divTableCell" style="width:134px; height:84px;"></td>
    </tr>
  </tbody>
</table>