cssを使用してテーブルの見出しとテーブルのデータを整列

Question

次の表は、データベースからデータを取得するために使用します。どのようにテーブルの見出しをテーブルのデータに揃えることができますか？テーブルの見出しとテーブルのデータが正しく整列していない可能性があります。これは単純な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> 

このコードは、次の出力を提供します。

Answer 1

display: inlineは<tr>に設定されています。最良のことは、テーブルに関連する要素にdisplay CSSプロパティを混乱させずに、デフォルトのdisplay値のままにしておくことです。可能なすべてのdisplayの値hereを確認できます。すべての値はtable-*です。最後に

Answer 2

私はanswer.Itが

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

の下に与えられました