input[type=text],
select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #b8c6dd;
}
.right {
right: 0;
background-color: #dce0d9;
}
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.btn').on('click', function(event) {
var firstName = $.trim($('#first_name').val());
var description = $.trim($('#description').val());
var taskDone = $('input[name=taskDone]:checked').val();
var taskType = $('#taskType option:selected').val();
var numRows = $('#tableBody').find('tr').length;
var newRow = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
var cols = newRow.children();
cols.eq(0).text(numRows + 1);
cols.eq(1).text(firstName);
cols.eq(2).text(description);
cols.eq(3).text(taskDone);
cols.eq(4).text(taskType);
newRow.appendTo('#tableBody');
});
</script>
<div class="split left">
<center>
<h2>Employee Task Record</h2>
</center>
<table>
<tr>
<th>S.N</th>
<th>Task</th>
<th>Description</th>
<th>Complete</th>
<th>Type</th>
</tr>
</table>
</div>
<div class="split right">
<center>
<form id="first_form" method="post" action="">
Given Task : <input type="text" id="first_name" name="task" value="">
<br><br> Description: <input type="text" name="description" value=""><br>
<br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
<input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
<select>
<option value="regular">Regular</option>
<option value="Meeting">Meeting</option>
<option value="coding">Coding</option>
<option value="documentation">Documentation</option>
<option value="support">Support</option>
</select> <br> <br>
<input type="submit" onclick="" value="submit" button class="button">
</form>
</center>
</div>