테이블 셀의 라디오 버튼 위치 설정

라디오 버튼 정렬에 문제가 있습니다. 라디오 버튼의 위치를 자유롭게 설정하고 싶습니다. 그러나 코드를 사용하여 올바르게 설정할 수는 없습니다.테이블 셀의 라디오 버튼 위치 설정

상단에서 가운데에 머물러 있으며 변경 가능한 부분은 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

자유롭게 무엇을 의미합니까? . 위치와 같이 주변을 움직이는 것처럼? –

네, 평소에 마진 좌, 우로 할 수있는 것을 내가 선택한 곳에서 원합니다. – 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

테이블 셀의 라디오 버튼 위치 설정

답변

관련 문제