Align table heading with table data using css

Question

The following table is used to retrieve data from database.How Can I align table heading with table data? Table headings and table data do not align properly.May be this is a simple css issue, But I'm so confuse without knowing what to do. Help would be highly appreciate

 <table class="table table-lg" id="Table">
    <thead >
        <tr style="display:inline;" class="filters">
            <th ><input type="text" class="form-control" placeholder="Project" disabled></th>
            <th><input type="text" class="form-control" placeholder="Client " disabled></th>
            <th><input type="text" class="form-control" placeholder="Project Start On" disabled></th>
            <th><input type="text" class="form-control" placeholder="End On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Task" disabled></th>  
            <th><input type="text" class="form-control" placeholder="Description" disabled></th>  
            <th><input type="text" class="form-control" placeholder="Commission" disabled></th>
            <th><input type="text" class="form-control" placeholder="Task Start On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Due On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Start" disabled></th>
            <th><input type="text" class="form-control" placeholder="Pause" disabled></th>
            <th><input type="text" class="form-control" placeholder="Stop" disabled></th>
        </tr>
    </thead>
    <tbody>
      <?php
        if(isset($view_data) && is_array($view_data) && count($view_data)): $i=1;
        foreach ($view_data as $key => $data) { 
        ?>
            <tr style="display:inline;"  <?php if($i%2==0){echo 'class="even"';}else{echo'class="odd"';}?>>
            <td><?php echo $data['projectname']; ?></td> 
            </tr>  
            <tr style="display:inline;">  
            <td><?php echo $data['ClientName']; ?></td>
            </tr>  
            <tr style="display:inline;">  
            <td><?php echo $data['datetimepicker20']; ?></td>
            </tr>  
            <tr style="display:inline;">
            <td><?php echo $data['datetimepicker21']; ?></td>
            </tr>  
            <tr style="display:inline;">    
            <td><?php echo $data['task']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['Description']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['Commission']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['datetimepicker21']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['datetimepicker22']; ?></td>
            </tr>           
            <tr class="highlight" style="display:inline-block;">
            <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
            <td>Click me</td>
            </tr>
            <tr style="display:inline-block;">
            <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
            <td>Click me</td>
            </tr>
            <tr style="display:inline-block;">
            <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
            <td>Click me</td>
            </tr>

      <?php
            $i++;
              }
            else:
        ?>
        <tr>
            <td colspan="7" align="center" >No Records Found..</td>
        </tr>
        <?php
            endif;
        ?>
    </tbody>                
    </table>

  </div>

This code provide following output.

Answer 1

At last I found answer.It is given below

    <table class="table table-lg" id="Table">
        <thead >
            <tr class="filters">
                <th ><input type="text" class="form-control" placeholder="Project" disabled></th>

                <th><input type="text" class="form-control" placeholder="Client " disabled></th>
                <th><input type="text" class="form-control" placeholder="Project Start On" disabled></th>
                <th><input type="text" class="form-control" placeholder="End On" disabled></th>
                <th><input type="text" class="form-control" placeholder="Task" disabled></th>  
                <th><input type="text" class="form-control" placeholder="Description" disabled></th>  
                <th><input type="text" class="form-control" placeholder="Commission" disabled></th>
                <th><input type="text" class="form-control" placeholder="Task Start On" disabled></th>
                <th><input type="text" class="form-control" placeholder="Due On" disabled></th>
                <th><input type="text" class="form-control" placeholder="Start" disabled></th>
                <th><input type="text" class="form-control" placeholder="Pause" disabled></th>
                <th><input type="text" class="form-control" placeholder="Stop" disabled></th>





            </tr>
        </thead>
        <tbody>
      <?php
        if(isset($view_data) && is_array($view_data) && count($view_data)): $i=1;
        foreach ($view_data as $key => $data) { 
        ?>
        <tr class="highlight" <?php if($i%2==0){echo 'class="even"';}else{echo'class="odd"';}?>>
            <td><?php echo $data['projectname']; ?></td> 

            <td><?php echo $data['ClientName']; ?></td>

            <td><?php echo $data['datetimepicker20']; ?></td>

            <td><?php echo $data['datetimepicker21']; ?></td>

            <td><?php echo $data['task']; ?></td>

            <td><?php echo $data['Description']; ?></td>

            <td><?php echo $data['Commission']; ?></td>

            <td><?php echo $data['datetimepicker21']; ?></td>

            <td><?php echo $data['datetimepicker22']; ?></td>








    <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>


    <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>

    <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>

    </tr>























        <?php
            $i++;
              }
            else:
        ?>
        <tr>
            <td colspan="7" align="center" >No Records Found..</td>
        </tr>
        <?php
            endif;
        ?>

    </tbody>                
    </table>

Answer 2

Your problem comes from setting display: inline on <tr>. Best thing to do is don't mess with display css property on any table related elements and leave them with their default display values. You can see all possible display values here, notice all table-* values.