在表

时间:2018-02-23 13:24:18

标签: html css radio-button

我试图获取下面列出的单选按钮列表 表数据。这可能吗?这是我目前的代码

            <table>
            <tr>
                <td> Voornaam </td>
                <td> <input type="text" class="profiel_inp"> </td>
                <td> Studentennr </td>
                <td> <input type="text" class="profiel_inp"> </td>
            </tr>
            <tr>
                <td> Achternaam </td>
                <td> <input type="text" class="profiel_inp"> </td>
                <td> Klas </td>
                <td> <select class="selectinp">
                      <option value="volvo">V1L</option>
                      <option value="saab">V1C</option>
                      <option value="mercedes">V1E</option>
                      <option value="audi">V1F</option>
                    </select> 
                </td>
            </tr>
            <tr>
                <td> Adres </td>
                <td > <input type="text" class="profiel_inp size2"> </td>
                <td> Studierichting </td>
                <td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
                <td > BIM <input type="radio" class="profiel_inp" name="Studierichting"> </td>
                <td > SIE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
                <td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
            </tr>
            <tr>
                <td> E-mail </td>
                <td> <input type="text" class="profiel_inp"> </td>
            </tr>
            <tr>
                <td> Telefoonnr </td>
                <td> <input type="text" class="profiel_inp"> </td>
            </tr>
            <tr>
                <td> Geslacht </td>
                <td> Man<input type="radio"  name="geslacht" class="profiel_inp"> 
                Vrouw<input type="radio"  name="geslacht" class="profiel_inp"> </td>
            </tr>
            <tr>
                <td> Geboortedatum </td>
                <td> <input type="date" class="profiel_inp"> </td>
            </tr>
        </table> 

使用CSS:

table {
width:100%;
margin-top:25px;
margin-bottom:25px;
}

input[type="text"], input[type="date"], .selectinp {
    min-height:30px;
    border:1px solid black;
    padding:5px;    
    width:75%;
}
table tr {
    padding-bottom:5px;
}

.size2 {
    min-height:60px!important;
}

所以我有一张左右两边的桌子。现在在左侧是非常基本的,但右侧必须包含列出的4个单选按钮列表!

1 个答案:

答案 0 :(得分:0)

您可以将它们添加到字段集并将其包装在标签中。然后在css中设置标签显示以阻止。

HTML

      <td name="Studierichting">
        <fieldset>
          <label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
          <label><input type="radio" class="profiel_inp" name="Studierichting">BIM</label>
          <label><input type="radio" class="profiel_inp" name="Studierichting">SIE</label>
          <label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
        </fieldset>

CSS

label {
  display:block;
}