html - Enter a line between the column title and the search box text in the header table

Question

I have a table. At the bottom of the search columns, I put a text box. See in this link: https://jsfiddle.net/rm1pt3Lz/

my code is:

      <table cellspacing="0" cellpadding="0" id=cnttable>
        <thead>
          <tr>
          <th style="width:36%;text-align:left;font-size:17px;">     
              <div>
                 Select
              </div>
              
              <div>
                 <input type="checkbox"/>
              </div> 
          </th>
          
          <th style="width:20%;text-align:left;font-size:17px;">
              <div>
                 Designation
              </div>
               <div>
                  <input id="x2" type="text" style="padding:5px"/>
              </div>
         </th>
           
         <th style="width:15%;text-align:left;font-size:17px;">
            <div>
               <a href="google.com">Mobile</a>
            </div>
            <div>
               <input id="x3" type="text" style="padding:5px"/>
            </div>
         </th>
              
        <th style="width:24%;text-align:left;font-size:17px;">Operation
            <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>

Answer 1

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>