使用css将表格标题与表格数据对齐

下表用于从数据库检索数据。如何将表格标题与表格数据对齐？表标题和表格数据没有正确对齐。可能这是一个简单的CSS问题，但我很困惑，不知道该怎么做。帮助将非常感谢使用css将表格标题与表格数据对齐

<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>

此代码提供以下输出。

来源

2017-07-30 Dushee

你的问题来自的设置<tr>。最好的办法是不要在任何表格相关元素上混淆display css属性，并将它们的默认值display保留。您可以看到所有可能的display值here，请注意所有table-*值。

来源

2017-07-30 03:19:47 kamyl

最后我找到下面

<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.It给出

来源

2017-07-30 07:55:34 Dushee

使用css将表格标题与表格数据对齐

回答

相关问题