[B]HTML[/B]
<form class="form1" method="post" name="form1" action="kundeneu.php">
<div class="field-cols">
<fieldset class="field-col">
<legend>Kunden daten</legend>
<table>
<tbody>
<tr>
<td>Anrede</td>
<td><input type="text" name="anrede"></td>
</tr>
<!-- ... hier de rest ... -->
<tr>
<td>Handy</td>
<td><input type="text" name="handy"></td>
</tr>
<tr>
<td>Extra verbindings daten</td>
<td><textarea rows="3" name="extrainfo"></textarea></td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="field-col">
<legend>Mehr daten</legend>
<table>
<tbody>
<tr>
<td>Krankenkasse</td>
<td><input type="text" name="krankenkasse"></td>
</tr>
<!-- ... hier de rest ... -->
<tr>
<td>Extra kunde info</td>
<td><textarea rows="3" name="kundeinfo"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="reset" value="Legen">
<input type="submit" value="Opslaan" name="submit"></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</form>
[B]CSS[/B]
/* een aantal standaard waarden */
.form1 {
width: 100%;
font: normal 14px/1.5 'Helvetica',Arial,sans-serif;
}
.form1, .form1 * {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
/* container voor beide fieldsets */
.form1 .field-cols {
display: flex;
flex-wrap: wrap;
}
/* fieldset 50% van de breedte */
.form1 .field-col {
width: 50%;
flex: 0 0 50%;
padding: 5px;
}
/* tabel 100% van fieldset breedte */
.form1 table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #999;
}
/* tabel cel */
.form1 td {
padding: 4px 6px;
vertical-align: top;
text-align: left;
}
/* eerste cel 40% (dus 2e cel 60%) */
.form1 td:first-child {
width: 40%;
}
/* input/textarea 100% van de cel breedte */
.form1 input, .form1 textarea {
width: 100%;
border: 1px solid #999;
}
/* submit en reset 'auto' breedte */
.form1 input[type=submit],
.form1 input[type=reset] {
width: auto;
padding: 3px 12px;
font-weight: bold;
}