Here is the HTML code snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='js/knockout-3.0.0.js'></script>
<script type='text/javascript' src='js/myTasks.js'></script>
<link rel="stylesheet" type="text/css" href="css/walk.css">
<TITLE>Your Tasks</TITLE>
</HEAD>
<BODY>
<div class="screenSection">
<div class="sectionHeader">
<p>Your Tasks</p>
</div>
<div class="lines">
<table class="dataTable" id="CADataTable">
<thead>
<tr>
<th style="width: 15em;"> Project name</th>
<th style="width: 7em;"> Number</th>
<th style="width: 50em;"> description</th>
<th style="width: 5em;"></th>
</tr>
</thead>
<tbody data-bind="foreach: Assimilation">
<tr>
<td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
<td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
<td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
<td style="width: 5em;">
<img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation">
</td>
</tr>
</tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newAssimilation">Add new row</button>
</div>
</div>
</BODY>
</HTML>
Upon clicking the add new row button, an unexpected behavior occurs which results in some unwanted space being displayed.
This CSS is currently applied:
@CHARSET "UTF-8";
.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label {
display: block;
font-size: 1.7em;
margin: 0.8em 0 0.1em 0.15em;
width: 17.89em;
}
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 22px; width: 250px }
fileSelection { width: 50em; height: 30px; }
input:focus,textarea:focus,select:focus{
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff; outline: none; }
td
{
background: #A9D0F5;
text-align: center;
height:2em;
}
th
{
height:2em;
}
.trClass
{
height:2em;
white-space: nowrap;
}
table
{
width: 98%;
font-size: 1.2em;
clear: both;
}
The objective is to remove this excess blue space from the layout. However, identifying such issues can be challenging for a backend developer who is not well-versed in frontend development. Any assistance or guidance on rectifying this issue would be greatly appreciated!
EDIT: