First split the inputs on to their own row, they will be much easier to mangage. Then you can use some basic CSS to give them a background color to create your line. A bit of padding and a different font can also go a long way. I’d also suggest eleminating most of your inline styles and using CSS classes instead. Its much easier to maintain and work with.
html, body {
margin: 0px;
font-family: Arial;
}
table {
width: 100%;
}
th {
box-sizing: border-box;
padding: 8px;
font-size: 17px;
text-align: left;
}
/*Inputs*/
thead td {
background-color: #e8e9e8;
padding: 8px;
}<table cellspacing="0" cellpadding="0" id="cnttable">
<thead>
<tr>
<th style="width:36%;">
Select
</th>
<th style="width:20%;">
Designation
</th>
<th style="width:15%;">
<a href="google.com">Mobile</a>
</th>
<th style="width:24%;">
Operation
</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input id="x2" type="text" style="padding:5px" />
</td>
<td>
<input id="x3" type="text" style="padding:5px" />
</td>
<td>
</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>text1</td>
<td>0052522222</td>
<td></td>
</tr>
<tr>
<td></td>
<td>text2</td>
<td>00525227652</td>
<td></td>
</tr>
</tbody>
</table>Edit
If you want the search in the same row, you can, although I suggest finding another way to change whatever is requiring that so they can be separate.
Either way here is a snippet that does that. It’s harder to control, but it still works.
Pretty much you have must have two separate elements within the header cell. Each is set to 50% height and the 2nd element is given background color. You have to have a <div> (or similar) element as the children because it needs to be resized.
html, body {
margin: 0px;
font-family: Arial;
}
table {
width: 100%;
}
th {
height: 50px;
font-size: 17px;
text-align: left;
}
th > * {
width: 100%;
height: 50%;
box-sizing: border-box;
padding: 8px;
}
th > *:nth-of-type(2) {
background-color: #e8e9e8;
}<table cellspacing="0" cellpadding="0" id="cnttable">
<thead>
<tr>
<th style="width:36%;">
<div>Select</div>
<div>
<input type="checkbox" />
</div>
</th>
<th style="width:20%;">
<div>Designation</div>
<div>
<input id="x2" type="text" style="padding:5px" />
</div>
</th>
<th style="width:15%;">
<div>
<a href="google.com">Mobile</a>
</div>
<div>
<input id="x3" type="text" style="padding:5px" />
</div>
</th>
<th style="width:24%;">
<div>Operation</div>
<div></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>text1</td>
<td>0052522222</td>
<td></td>
</tr>
<tr>
<td></td>
<td>text2</td>
<td>00525227652</td>
<td></td>
</tr>
</tbody>
</table>