設置表格單元格中單選按鈕的位置

我的單選按鈕對齊有問題。我想自由設置單選按鈕的位置，但是現在我無法正確設置代碼。設置表格單元格中單選按鈕的位置

它停留在頂部的中間，我只能更改margin-left。任何人都可以幫助我嗎？

你可以在這裏找到我的代碼：https://jsfiddle.net/3vL8Lgo9/

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

<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>

來源

2017-09-20 KDP

使用'垂直對齊：底部;'或'垂直對齊：首位;'的'TD，使其上下移動 –

你想讓它在中間;

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

還是我誤會了你？

來源

2017-09-20 12:13:36

我想在自由移動它tablecell到我想要的位置 – KDP

隨意什麼意思？。像位置一樣移動它？ –

是的，我希望在我選擇的地方使用，通常可以使用margin-left和top。您可以使用 – KDP

將.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>

來源

2017-09-20 15:38:10 jfeferman

設置表格單元格中單選按鈕的位置

回答

相關問題